Highcharts

Question

有什么方法可以在 Highcharts 中显示 1:1 对角线吗？我正在寻找一条 X 和 Y 值始终匹配的线。

我知道如何使用渲染器在 Highcharts 中渲染一条线，但是，我不想要一条独立的线，而是一条对图表做出反应的线 resizing/zooming。带有 [(0,0),(1,1)] 的系列不是真正的选择（它会影响缩放）。

除 x 轴和 y 轴外，其他类似的东西可能会因缩放而改变它们的值。

Answer 1

您可以通过检测轴上的 setExtremes() 事件来实现，并触发一个函数来获取轴的极值并画一条线。（或者，在这种情况下，我使用了 afterSetExtremes() 函数）

在我的例子中，我使用了一个线系列。我假设您可以调整它以使用渲染器，因为您已经使用渲染器最初绘制了线条。

function redrawLine(chart) {
    var xExt = chart.xAxis[0].getExtremes();
    var yExt = chart.yAxis[0].getExtremes();

    chart.series[1].setData([
        {'x':xExt.min,'y':yExt.min},
        {'x':xExt.max,'y':yExt.max}
    ]);
}

示例：

http://jsfiddle.net/jlbriggs/feLdzpux/

当然，如果您的目的是将观察值与预测值进行比较，那么在放大时重新绘制线条会适得其反并且会产生误导 - 线条不应根据缩放级别移动 - 它应该始终保持不变。

Highcharts - 对角线 X/Y 轴

Highcharts - Diagonal line X/Y axis

javascript

charts

drawing