我需要在工具提示中显示3个值: 时间,价值和另一个价值(变化)。
我看到了this example(但jsdfiddle无效)。
我试过这个
//each loop..
indice.push(["time", "value1", "value2"]);
,工具提示设置
tooltip:
{
useHTML: true,
formatter: function()
{
return '' + Highcharts.dateFormat('%H:%M:%S', this.x) +'; '+ this.y + this.z(<-is this right?);
}
},
和系列
series:
[{
type: 'area',
data: indice
}]
可以帮助吗? thsnks。
答案 0 :(得分:44)
如果要为x和y值以外的点传递其他数据,则必须为该值命名。在下面的example中,我为每个数据点添加了以下三个附加值:
{
y: 3,
locked: 1,
unlocked: 1,
potential: 1,
}
然后,要在工具提示中访问并显示这些值,请使用以下命令:
tooltip:
{
formatter: function() { return ' ' +
'Locked: ' + this.point.locked + '<br />' +
'Unlocked: ' + this.point.unlocked + '<br />' +
'Potential: ' + this.point.potential;
}
}
答案 1 :(得分:7)
如果您在多系列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;
}
},
...
}
现在你会看到很好的系列名称“Small Cities”而不是series.name(small_cities)。您在系列中设置的所有属性都可以在this.points[].series.userOptions
中找到。
有关更多格式化程序选项,请查看Highstocks docs。
答案 2 :(得分:5)
我弄清楚了, 我在数据数组中传递3个值
indice.push([(new Date(value.x)).getTime(), val_change[0], val_change[1]]);
系列: [{ 类型:'区域', 名称:titleindice, 数据:indice, showInLegend:false //禁用显示/隐藏图标 }]
并在工具提示中
tooltip:
{
useHTML: true,
formatter: function()
{
var color = "";
return Highcharts.dateFormat('%H:%M:%S', this.x) + this.y + this.point.config[2] ;
}
},
答案 3 :(得分:5)
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]);}
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/>"; }
答案 4 :(得分:4)
我试过的是将系列名称与x轴和y轴值连接起来,它对我来说很好。你面临什么问题?
tooltip: { formatter: function () { return this.x + ': ' + this.series.name + ': ' + this.y; } }