Highcharts - 对角线X / Y轴 [英] Highcharts - Diagonal line X/Y axis

问题描述

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

我知道如何使用渲染器在Highcharts中渲染一条线，但是，我不希望独立的行，但对图表大小/缩放起反应。与[（0,0），（1,1）]的系列并不是一个真正的选项（它会影响缩放）。

类似这样的东西除了x和y轴可能会因变焦而改变它们的值。

解决方案

您可以通过检测 setExtremes （）事件，然后触发一个函数来获取极值轴并绘制一条线。
（或者，在这种情况下，我使用 afterSetExtremes（）函数）

在我的示例我是通过使用一系列线来完成的。我假设你可以调整它来使用渲染器，因为你已经使用渲染器来绘制线。

  function redrawLine （图表）{
 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} 
]）; 
 
 $ / code> 

示例：



• http://jsfiddle.net/jlbriggs/feLdzpux/ li>
  

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

Is there any way of showing a 1:1 diagonal line in Highcharts? I am looking for a line which X and Y values always match.

I know how to render a line in Highcharts using the renderer, however, I don't want an independent line but one that reacts to the chart resizing/zooming. A series with [(0,0),(1,1)] is not really an option (it would affect zooming).

Something like this except x and y axis might vary their value due to zooming.

解决方案

You can do it by detecting the setExtremes() event on you axes, and fire a function to get the axis extremes and draw a line. (or, in this case, I used the afterSetExtremes() function)

In my example I did it by using a line series. I assume you can adapt it to use the renderer since you've already used the renderer to draw the line initially.

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}
    ]);
}

Example:

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

Of course, if your intent is to compare observed values to predicted values, then re-drawing the line when you zoom in is counter productive and misleading - the line should not move based on the zoom level - it should always be constant.

这篇关于Highcharts - 对角线X / Y轴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！