具有分组系列工具提示的Highcharts折线图



我有一个绘制多个数据集的折线图,每个数据集都有两条关联线:一条参考线和一条测量线。

为了绘制所有这些线,我为每个数据子集添加了单独的系列,使参考线看起来像虚线,测量线看起来像实线。

工具提示格式化程序根据光标位置显示特定点的详细信息数据的弹出窗口。它只显示一个系列的数据。

如何将系列组合在一起,以便显示多个系列的工具提示,但不一定显示所有系列

Highcharts似乎有一个shared选项,可以显示与光标X坐标对应的所有系列的工具提示,但有没有方法进行某种分组?我能对系列配置做些什么吗?让每个系列在图表上呈现两条线,但外观不同?

不确定我想用Highcharts做的事情是否可行。可能需要是自定义图表。

Highcharts中没有这样的默认功能,但目前我看到了两种可能的解决方案:

  • x值略有变化:

series: [{
data: [1, 1, 1]
}, {
data: [[0.0001, 2], [1.0002, 2], [2.0002, 2]]
}, {
data: [3, 3, 3]
}, {
data: [[0.0001, 4], [1.0002, 4], [2.0002, 4]]
}]

现场演示:http://jsfiddle.net/BlackLabel/v1uxp3jh/

  • 包裹refresh方法以排除一些不需要的点:

(function(H) {
H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
points.forEach(function(p, i) {
if (p.series.name === "Series 2") {
points.splice(i, 1);
}
});
proceed.apply(this, Array.prototype.slice.call(arguments, 1));
});
}(Highcharts));

现场演示:http://jsfiddle.net/BlackLabel/qd4mnx8e/

文档:https://www.highcharts.com/docs/extending-highcharts

最新更新