I am using chart.js for generating line chart. Its works me successfully. But I need to draw a circle or point at Intersection and draw a line towards "X" axis. Can you please any one help me to get this?

Thanks in advance.

解决方案

The main points to achieve this with chartjs (without being an chartjs expert by any means) would be:

Method 1 - Math

Step 1

Unless you can get a processed point array from chartjs' internals, you would have to, as chartjs uses Bezier curves to draw the graphs, manually convert your point data set into a new point array representing the drawn line.

You would also have to consider scale the same way as chartjs does. As canvas does not provide the points for its Bezier method, you will have to calculate them

Have in mind though: you can not just use some random control points - you will have to replicate these too for the curve the same way chartjs does, so you need to use

Step 2

When both lines are in "Bezier form" you will have to limit the range you want to search by finding which segments of the lines are covering the range you want to check them against.

Do to this using line.x1 <= range.x1 <= line.x2 and the same for range.x2 of the range you want to search (the y axis is not important in this step).

You should end up having two arrays with line segments that matches the range.

(of course, if you don't need to reuse the curves and only need a single segment, you can just find the segments in step 1 and use that for this step).

Step 3

Now you need to loop through array one.

For the current segment in array one, you need to test against all the segments in array two doing intersection test using a

Final

Now you can extract the intersecting point (if any) and plot it to chartjs' canvas (and congratulation, you are also halfway to your own chart widget :P ).

Method 2 - Brute Force

Step 1

Get the bitmap of the canvas.

Step 2

Define a range you want to search for intersection

Calculate the composed color where the two lines meet. This will be the color you search for (you can do a pre-step instead, locating a known intersection and read the pixel value from that point).

Step 3

Scan line by line (vertically) and test each pixel for color values. You need to use a tolerance range (+/- t%) as the canvas pixels are integer values while your result from mixing is a floating point value.

Final

When a pixel has been found add a delta to the value to compensate for line width. Plot to canvas.