javascript - Highcharts - 对 Angular 线 X/Y 轴

Question

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

我知道如何使用渲染器在 Highcharts 中渲染一条线，但是，我不想要一条独立的线，而是一条对图表大小调整/缩放使用react的线。带有 [(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/

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