Display vertical line on intersection point

问题

I'm trying to represent a Pareto chart with Highcharts, as you can see here.
The horizontal line shows the 80% value, but now I wanted to display a vertical line where that horizontal 80% line intersects with the "Acumulated" chart series.

This is an example of what I'm trying to achieve:

Is there a way to do it?

Another option would be to get the "x" value of the "Acumulated" spline where it's "y" value is "80", that way I could then draw the line manually.
Is this even possible with the Highcharts API?

I know that it's possible to get the values of a point in a series, but that isn't enough in this case:

var point = chart.get('accumulated').data[2];

回答1:

I have find it for 80:20 calculation.

First I have find the first value in series from Spline data which greater than or equal to 80.

i.e. >= 80

Suppose it is DataX Then find out the that index in array plus one for DataX.

i.e. DataX location is DataIndex = index+1

(as array start from 0th calculation need plus one)

formula is
DataX : DataIndex :: 80: ?

let the question mark is xIndexOf80

then xIndexOf80 = (DataIndex *80)/(DataX ).

xIndexOf80 is nothing but position of 80 on X axis.

which gives you exact marks on X-Axis

function findInetrSectionPoint(arrSplineData) {

    var intLen = arrSplineData.length;

    for (var index = 0; index < intLen; index++) {

      if (arrSplineData[index] >= 80) {

        interSectPoint = ((index + 1) * 80) / arrSplineData[index] - 1;
        break;
      }

    }

    return interSectPoint;
  }

Here is the Plunker

回答2:

You can calculate position of 80% point and then use http://api.highcharts.com/highstock#Renderer rect. Apart from that you can also check this option http://api.highcharts.com/highstock#Axis.addPlotLine() / http://api.highcharts.com/highstock#yAxis.plotLines

来源：https://stackoverflow.com/questions/14812821/display-vertical-line-on-intersection-point

标签

javascript

charts

Highcharts