Highcharts同步图表 [英] Highcharts Synchronized charts

问题描述

通过显示工具提示，设置悬停状态并通过坐标xData(具有行而不是列的图表布局)来绘制十字线的任何方法?

Any way to get Highlight a point by showing tooltip, setting hover state and draw crosshair by coordinate xData with chart layout in row, not in column?

http://jsfiddle.net/HappyFX/wt91mbvf/

基于静态图表宽度的 https://stackoverflow.com/a/37565667/4262914 中的解决方案:

Solution from https://stackoverflow.com/a/37565667/4262914 based on static chart width:

 event.chartX = (event.chartX+600) % 200;

在以下情况下不好:

.chart{
    position: absolute;
    height: 50%;
    width: 50%;
    margin: 0 auto;
}

推荐答案

问题是searchPoint搜索光标的最近点.实际上已经完成了:第二个图表上的第一个点被突出显示.

The problem is that searchPoint searches for the closest point to the cursor. And actually it's done: the first point on the second chart is highlighted.

您可以对此进行一些修改:

You can modify this a bit:

• 在.chart上设置事件，而不在#container
上设置事件
• 找到悬停的图表并获取最近的点
• 搜索相应点时，将该点位置用作假事件

• set event on .chart, not on #container
• find hovered chart and retrieve the closest point
• use that point position as a fake event when searching corresponding points

和演示: http://jsfiddle.net/v2t171og/

这篇关于Highcharts同步图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！