javascript Highcharts：共享工具提示格式化程序 this.points[i]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27207349/
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: Shared tooltip formatter this.points[i]
提问by ignisruber
How can I get the tooltip seen in the image below to be displayed as shared?
如何让下图中看到的工具提示显示为共享？
You might want to take a look at the Highcharts API Reference (especially the info about the shared option): http://api.highcharts.com/highcharts#tooltip.formatter
您可能想查看 Highcharts API 参考（尤其是有关共享选项的信息）：http: //api.highcharts.com/highcharts#tooltip.formatter
Here's the jsfiddle: https://jsfiddle.net/9bw1qLj4/
这是 jsfiddle：https://jsfiddle.net/9bw1qLj4/
for fullscreen: https://jsfiddle.net/9bw1qLj4/embedded/result/
全屏显示：https: //jsfiddle.net/9bw1qLj4/embedded/result/
I tried this, but it didn't work:
我试过这个，但没有用：
tooltip: {
shared: true,
formatter: function () {
var y_value_kwh = (this.points[i].y/1000).toFixed(2);
return '<span style="font-size: 10px">' + this.key + '</span><br/>' + '<span style="color:' + this.points[i].series.color + '">\u25CF</span> ' + this.points[i].series.name + ': <b>' + y_value_kwh + ' kWh</b><br/>';
},
},Current code:
当前代码：
tooltip: {
//shared: true,
formatter: function () {
var y_value_kwh = (this.y/1000).toFixed(2);
return '<span style="font-size: 10px">' + this.key + '</span><br/>' + '<span style="color:' + this.series.color + '">\u25CF</span> ' + this.series.name + ': <b>' + y_value_kwh + ' kWh</b><br/>';
},
},Current output:
电流输出：
回答by Alfredo Delgado
When you want to display the individual data points for stacked graphs with a shared tooltip, you have to loop through the individual points and build up the tooltip markup.
当您想要使用共享工具提示显示堆叠图形的各个数据点时，您必须遍历各个点并构建工具提示标记。
tooltip: {
shared: true,
formatter: function () {
var points = this.points;
var pointsLength = points.length;
var tooltipMarkup = pointsLength ? '<span style="font-size: 10px">' + points[0].key + '</span><br/>' : '';
var index;
var y_value_kwh;
for(index = 0; index < pointsLength; index += 1) {
y_value_kwh = (points[index].y/1000).toFixed(2);
tooltipMarkup += '<span style="color:' + points[index].series.color + '">\u25CF</span> ' + points[index].series.name + ': <b>' + y_value_kwh + ' kWh</b><br/>';
}
return tooltipMarkup;
}
}
Here's a working example: http://jsbin.com/qatufetiva/1/edit?js,output
这是一个工作示例：http: //jsbin.com/qatufetiva/1/edit?js,output
