Javascript highcharts 将多个值传递给工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11294326/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
highcharts pass multiple values to tooltip
提问by devmonster
I need to display 3 values on the tooltip: the time, the value and another value(change).
我需要在工具提示上显示 3 个值：时间、值和另一个值（更改）。
I saw this example(but the jsdfiddle is not working).
我看到了这个例子（但 jsdfiddle 不起作用）。
I tried this
我试过这个
//each loop..
indice.push(["time", "value1", "value2"]);
, the tooltip settings
, 工具提示设置
tooltip:
{
useHTML: true,
formatter: function()
{
return '' + Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y + this.z(<-is this right?);
}
},
and the series
和系列
series:
[{
type: 'area',
data: indice
}]
can somone help pls? thsnks.
有人可以帮忙吗？谢谢。
回答by Linger
If you want to pass additional data for a point other than the x and y values, then you have to name that value. In the following exampleI add the following three additional values to each data point:
如果要为 x 和 y 值以外的点传递其他数据，则必须命名该值。在以下示例中，我向每个数据点添加了以下三个附加值：
{
y: 3,
locked: 1,
unlocked: 1,
potential: 1,
}
Then to access and display those values in the tooltip I use the following:
然后为了在工具提示中访问和显示这些值，我使用以下内容：
tooltip:
{
formatter: function() { return ' ' +
'Locked: ' + this.point.locked + '<br />' +
'Unlocked: ' + this.point.unlocked + '<br />' +
'Potential: ' + this.point.potential;
}
}
回答by MyGGaN
If you, in a multi series Highstocks chart, want to display series specific data in the tooltip you could do something like this.
如果您在多系列 Highstocks 图表中想要在工具提示中显示系列特定数据，您可以执行以下操作。
var series = [];
// Populate our series
series.push({
name: "small_cities",
displayName: "Small Cities",
color: "#123456",
data: [...]
});
series.push({
name: "Countries",
displayName: "Countries",
color: "#987654",
data: [...]
});
chart: {
...
tooltip: {
formatter: function() {
var s = '';
$.each(this.points, function(i, point) {
s += '<br /><span style="color:' + this.series.color + '">' +
point.series.userOptions.displayName + '</span>: ' + point.y;
});
return s;
}
},
...
}
Now you'll see nice series names "Small Cities" instead of the series.name (small_cities). All attributes you set on the series can be found in this.points[].series.userOptions.
For more formatter options take a look at the Highstocks docs.
现在您将看到漂亮的系列名称“Small Cities”而不是 series.name (small_cities)。您在系列上设置的所有属性都可以在 中找到this.points[].series.userOptions。有关更多格式化程序选项，请查看Highstocks 文档。
回答by devmonster
I figured it out, I pass 3 values in the data array
我想通了，我在数据数组中传递了 3 个值
indice.push([(new Date(value.x)).getTime(), val_change[0], val_change[1]]);
series: [{ type: 'area', name: titleindice, data: indice, showInLegend : false //disable the the show/hide icon }]
series: [{ type: 'area', name: titleindice, data: indice, showInLegend : false //禁用显示/隐藏图标}]
and in the tooltip
并在工具提示中
tooltip:
{
useHTML: true,
formatter: function()
{
var color = "";
return Highcharts.dateFormat('%H:%M:%S', this.x) + this.y + this.point.config[2] ;
}
},
回答by poordeveloper
two ways.
两种方式。
1
1
series: [
{ ...
tooltip:
{pointFormat: "<span style=\"color:{series.color}\">{series.name}</span>: <b>{point.y} {y2}</b><br/>"}
}, ...
]
o = Highcharts.Point.prototype.tooltipFormatter
Highcharts.Point.prototype.tooltipFormatter=function(format){return o.call(this, format).replace("{y2}", this.config[2]);}
2
2
a = new Highcharts.StockChart(options);
a.series[0].tooltipFormatter = function(item) { return "<span style=\"color:{" + item.series.color+"\">" +item.series.name+"</span>: <b>"+item.y+item.point.config[2]+"</b><br/>"; }
回答by Fraz Sundal
What i have tried is concatenating series name with x-axis and y-axis value and it works fine for me. What issue you are facing?
我尝试过的是将系列名称与 x 轴和 y 轴值连接起来，它对我来说很好用。您面临什么问题？
tooltip: { formatter: function () { return this.x + ': ' + this.series.name + ': ' + this.y; } }
