Question

我正在开发一个显示相同类别的多个图表的Web应用程序。如果您想要一个例子，请考虑一段时间内不同城市的人口。所有图表都为X轴启用了十字准线。

我被问到，当用户在图表上盘旋并移动鼠标时 - 因此移动十字准线 - 是否可以将所有其他图表的十字准线平行，有点反映运动。

离开我的头顶不应该是不可能的 - 每当鼠标移动时捕捉X轴上的位置，然后将所有图表上的十字准线设置/移动到所有其他图表的相同值 - 但那样会只有以编程方式移动十字准线才有效。

这可能是非常重要的吗？

编辑：我在jsfiddle上创建了一个部分工作版本，基于答案中链接到的jsfiddle，并在我们的网络应用程序中复制图表的两列布局：http://jsfiddle.net/basiliosz/sgc8jg34/

十字准线仅在用户悬停鼠标光标的上方和下方的图表中移动，而不是在另一列中移动。这是事件处理程序中的关键代码片段：

for (i = 0; i < noOfCharts; i = i + 1) {
    chart = separateCharts[i]
    event = chart.pointer.normalize(e.originalEvent); // Find coordinates within the chart
    point = chart.series[0].searchPoint(event, true); // Get the hovered point
    if (point) {
        point.highlight(event);
    }
}

其中Point.prototype.highlight定义如下：

Highcharts.Point.prototype.highlight = function (ev) {
    this.onMouseOver(); // Show the hover marker
    this.series.chart.tooltip.refresh(this); // Show the tooltip
    this.series.chart.xAxis[0].drawCrosshair(ev, this); // Show the crosshair
};

Answer 1

可以使用绘制十字准线的内部函数（它不是官方API的一部分）

/**
 * Draw the crosshair
 * 
 * @param  {Object} e The event arguments from the modified pointer event
 * @param  {Object} point The Point object
 */
 Axis.prototype.drawCrosshair: function(e, point) {}

示例：http://jsfiddle.net/6rbhxmrp/

您还可以使用同步图表https://www.highcharts.com/demo/synchronized-charts

进行官方演示

禁用工具提示的示例：http://jsfiddle.net/vwm4oe6k/

Highcharts图表中的十字准线是否可以设置并以编程方式移动？

1 个答案: