javascript 如何在工具提示高图中获取多个系列数据?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19312312/
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
How to get multiple series data in tooltip highcharts?
提问by Mohit Gupta
I want to display multiple series Data in tooltip on every column
我想在每列的工具提示中显示多个系列数据
tooltip: {
formatter: function() {
return '<span style="color:#D31B22;font-weight:bold;">' +this.series.name +': '+ this.y +'<br/>'+
'<b style="color:#D31B22;font-weight:bold;">'+this.x +'</b><span>';
}
},
and Data
和数据
series: [{
showInLegend: false,
name: 'Total Click',
data: [3000,200,50,4000],
color: '#9D9D9D'
}, {
showInLegend: false,
name: 'Total View',
data: [100,2000,3000,4000],
color: '#D8D8D8'
}]
I am using like this but in tool tip only one series data is showing at a time. I want to display Data like this (Total View:100 and Total Click:3000 )
我是这样使用的,但在工具提示中一次只显示一个系列数据。我想显示这样的数据(总视图:100 和总点击:3000)
回答by Pragnesh Chauhan
please try using this code
请尝试使用此代码
tooltip: {
formatter: function() {
var s = [];
$.each(this.points, function(i, point) {
s.push('<span style="color:#D31B22;font-weight:bold;">'+ point.series.name +' : '+
point.y +'<span>');
});
return s.join(' and ');
},
shared: true
},
回答by Sebastian Bochan
You need to use shared parameter http://api.highcharts.com/highcharts#tooltip.sharedand then in formater iterate on each point.
您需要使用共享参数http://api.highcharts.com/highcharts#tooltip.shared然后在格式化程序中迭代每个点。
回答by drj
If anybody looking for scatterplot, here is solutionto show shared tooltip.
如果有人在寻找散点图,这里是显示共享工具提示的解决方案。
formatter: function(args) {
var this_point_index = this.series.data.indexOf( this.point );
var this_series_index = this.series.index;
var that_series_index = this.series.index == 0 ? 1 : 0; // assuming 2 series
var that_series = args.chart.series[that_series_index];
var that_point = that_series.data[this_point_index];
return 'Client: ' + this.point.name +
'<br/>Client Health: ' + this.x +
'<br/>' + this.series.name + ' Bandwidth: ' + this.y + 'Kbps' +
'<br/>' + that_series.name + ' Bandwidth: ' + that_point.y + 'Kbps';
}