Highcharts - Diagonal line X/Y axis

问题:

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.

回答1:

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.