Javascript highcharts在工具提示中显示其他自定义数据
我想在我的highcharts的工具提示中添加信息(我已经尝试了其他类似的问题,但没有一个解决了我的问题…) 我想把日期Javascript highcharts在工具提示中显示其他自定义数据,javascript,highcharts,Javascript,Highcharts,我想在我的highcharts的工具提示中添加信息(我已经尝试了其他类似的问题,但没有一个解决了我的问题…) 我想把日期(jj.mm.aaaa)作为我xAxis中每个数据的标签。但在我的工具提示中,我希望将日期和其他未在图表中呈现的信息作为工具提示标题:(jj.mm.aaaa)=n项 例如,我有以下xAxis数据: chartOptions.xAxis = { categories: ['23.01.2014', '24.01.2014', '25.01.2014'] }; 这是我想要的xAx
(jj.mm.aaaa)
作为我xAxis中每个数据的标签。但在我的工具提示中,我希望将日期和其他未在图表中呈现的信息作为工具提示标题:(jj.mm.aaaa)=n项
例如,我有以下xAxis数据:
chartOptions.xAxis = {
categories: ['23.01.2014', '24.01.2014', '25.01.2014']
};
这是我想要的xAxis标签,但在我的工具提示中,我想要:
------------------------ ------------------------ ------------------------
- 23.01.2014 = 5 items - - 24.01.2014 = 3 items - - 25.01.2014 = 4 items -
------------------------ ------------------------ ------------------------
我尝试向xAxis对象添加一个选项,如下所示:
chartOptions.xAxis = {
categories: ['23.01.2014', '24.01.2014', '25.01.2014'],
nbItems: [5,3,4]
};
但这将为每个元素输出数组的所有单元格:
---------------------------- ---------------------------- ----------------------------
- 23.01.2014 = 5,3,4 items - - 24.01.2014 = 5,3,4 items - - 25.01.2014 = 5,3,4 items -
---------------------------- ---------------------------- ----------------------------
是否有一种方法可以只获得项目的相应nb
这里有一个小提琴可以帮助您理解我的问题:我使用自定义工具提示格式化程序函数完成了与您所需类似的操作
chartOptions.xAxis = {
categories: ['23.01.2014', '24.01.2014', '25.01.2014'],
nbItems: {"23.01.2014":5,'24.01.2014':3,'25.01.2014':4}
};
chartOptions.tooltip={
格式化程序:函数(){
var s=''+this.x+'('+chartOptions.xAxis.nbItems[this.x]+');
$.each(this.points,function(i,point){
s+='
'+point.series.name+':'+
点.y+'m';
});
返回s;
},
分享:是的,
useHTML:false
};
这并不理想,因为您不再拥有完整的html支持,但仍然可以使用html()的子集来设置输出样式。有趣的问题。不像我最初想的那么容易!好。。。即使使用“tooltip.formatter”,它也应该能做到这一点;-)谢谢
chartOptions.tooltip = {
formatter: function() {
var s = '<b>'+ this.x + ' (' + chartOptions.xAxis.nbItems[this.x] + ')</b>';
$.each(this.points, function(i, point) {
s += '<br/>'+ point.series.name +': '+
point.y +'m';
});
return s;
},
shared: true,
useHTML: false
};