javascript 在 Highcharts 中显示不可见系列的工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7557533/
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
Display tooltip for invisible series in Highcharts
提问by j0nes
I am trying to display a custom tooltip using Highcharts. You can find an example of the code here: http://jsfiddle.net/jalbertbowdenii/fDNh9/188/
我正在尝试使用 Highcharts 显示自定义工具提示。您可以在此处找到代码示例：http: //jsfiddle.net/jalbertbowdenii/fDNh9/188/
When you hover over the chart, you can see that the tooltip only contains values from Series 2, but not from Series 1 (which is invisible). When you click on "Series 1" in the legend, you can see the values from Series 1 in the tooltip.
当您将鼠标悬停在图表上时，您可以看到工具提示仅包含系列 2 的值，而不包含系列 1（不可见）的值。当您单击图例中的“系列 1”时，您可以在工具提示中看到系列 1 中的值。
EDIT: no codeto commit, just fixing linkrot/adhering to editing rules...
Is there any way to display the values from an invisible series in a tooltip?
编辑：不code提交，只是修复链接腐烂/遵守编辑规则......
有没有办法在工具提示中显示不可见系列的值？
回答by Bhesh Gurung
tooltip: {
formatter: function() {
var s = '<b>'+ this.x +'</b>';
var chart = this.points[0].series.chart; //get the chart object
var categories = chart.xAxis[0].categories; //get the categories array
var index = 0;
while(this.x !== categories[index]){index++;} //compute the index of corr y value in each data arrays
$.each(chart.series, function(i, series) { //loop through series array
s += '<br/>'+ series.name +': ' +
series.data[index].y +'m'; //use index to get the y value
});
return s;
},
shared: true
}
回答by eolsson
The tooltip formatter is a function like any other function so if you just make the data available it can return a string with values for all series. In this exampleI moved the series arrays and categories to separate variables and the tooltip formatter uses an index into these arrays to find the values.
工具提示格式化程序是一个与任何其他函数一样的函数，因此如果您只是使数据可用，它可以返回一个包含所有系列值的字符串。在此示例中，我将系列数组和类别移动到单独的变量，工具提示格式化程序使用这些数组的索引来查找值。
formatter: function() {
var index = $.inArray(this.x, categories);
var s = '<b>'+ this.x +'</b>';
s += '<br/>'+ chart.series[0].name + ': ' + data1[index];
s += '<br/>'+ chart.series[1].name + ': ' + data2[index];
return s;
}
回答by Mike Zavarello
Another way to go about this is to make certain attributes of the series invisible, rather than the entire series itself. This will allow you to see it in the tooltip and legend.
解决此问题的另一种方法是使系列的某些属性不可见，而不是整个系列本身。这将允许您在工具提示和图例中看到它。
Here's what I did:
这是我所做的：
- First, I set the line color of the invisible series to "transparent."
- Next, I set the fill color for the invisible series markers to "transparent."
- Finally, I disabled the hover state for the markers. This prevents the shadowy highlight circles from appearing as you move your mouse cursor over each point in the visible series.
- 首先，我将隐形系列的线条颜色设置为“透明”。
- 接下来，我将不可见系列标记的填充颜色设置为“透明”。
- 最后，我禁用了标记的悬停状态。这可以防止在您将鼠标光标移到可见系列中的每个点上时出现阴影高光圆圈。
Here's a modified version of your original fiddle with these changes: http://jsfiddle.net/brightmatrix/fDNh9/184/
这是带有这些更改的原始小提琴的修改版本：http: //jsfiddle.net/brightmatrix/fDNh9/184/
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
lineColor: 'transparent', // make the line invisible
marker: {
fillColor: 'transparent', // make the line markers invisible
states: {
hover: {
enabled: false // prevent the highlight circle on hover
}
}
}
}, {
data: [216.4, 194.1, 95.6, 54.4, 29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5]
}]
Two items to note:
需要注意的两个项目：
- I've used the attribute
enableMouseTracking: falsewith other invisible series to prevent users from interacting with them (to achieve visual effects). If you set this for your invisible series, it will prevent the series data from appearing in your tooltip. - If you wanted to keep your invisbile series from appearing in the legend, you can add the attribute
showInLegend: false. Its data will still show in the tooltip.
- 我已经将该属性
enableMouseTracking: false与其他不可见系列一起使用，以防止用户与其交互（以实现视觉效果）。如果您为不可见系列设置此项，它将阻止系列数据出现在您的工具提示中。 - 如果你想让你的隐形系列不出现在图例中，你可以添加属性
showInLegend: false. 它的数据仍将显示在工具提示中。
I hope this helps others who come across this question.
我希望这可以帮助遇到这个问题的其他人。
回答by Vatsal
Too late for the answer but this is what I did. Plot the chart and make the color transparent. Plotted it on the opposite y axis and set max to zero. Set alignTicks to false. Something like this.
答案为时已晚，但这就是我所做的。绘制图表并使颜色透明。将其绘制在相反的 y 轴上并将 max 设置为零。将 alignTicks 设置为 false。像这样的东西。
chart: {
alignTicks: false,
type: 'line'
},
Then the only thing needed is to change the color value in tooltip formatter since the label will be transparent.
然后唯一需要的是更改工具提示格式化程序中的颜色值，因为标签将是透明的。
Hope this helps someone.
希望这可以帮助某人。
Happy Learning :)
快乐学习:)
