Chart.js找到交点Point并绘制一个圆 [英] Chart.js Find intersection Point and Draw a Circle

问题描述

我使用chart.js生成折线图。它成功地为我工作。但我需要在交点处绘制一个圆或点并向X轴画一条线。你有没有人可以帮我解决这个问题？

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?

提前致谢。

推荐答案

使用chartjs实现这一目标的要点（无论如何不是chartjs专家）将是：

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

除非你能得到来自chartjs'内部的处理过的点数组，你必须，因为chartjs使用贝塞尔曲线绘制图形，手动将点数据集转换为表示绘制线的新点数组。

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.

您还必须考虑与chartjs相同的缩放比例。由于canvas不为其Bezier方法提供点，因此您必须计算它们 以此为例 。您需要选择一个分辨率并在数据集中的每个点之间生成新的分段。

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 using for example this. You need to pick a resolution and generate new segments between each of the points in the data set.

请记住：您不能只使用一些随机控制点 - 你必须以与chartjs相同的方式为曲线复制这些，所以你需要使用 其来源 作为基础。

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 its source as basis.

当两条线都处于Bezier形式时，您必须通过查找哪些线段覆盖您想要检查它们的范围来限制您想要搜索的范围。

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.

使用 line.x1< = range.x1< = line.x2 对此做同样的事情对于要搜索的范围的范围.x2（在此步骤中，y轴不重要）。

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.

（当然，如果您不需要重复使用曲线，只需要一个段，您只需在步骤1中找到段并将其用于此步骤。）

(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).

现在你需要遍历数组一。

Now you need to loop through array one.

对于数组1中的当前段，你需要测试阵列2中的所有段使用 这样的方法 （您可以通过检查两条线在x轴上是否有任何重叠来过滤掉测试次数。）

For the current segment in array one, you need to test against all the segments in array two doing intersection test using a method such as this one (you can filter down number of tests by checking if the two lines have any overlap on the x-axis).

现在你可以提取相交点（如果有的话）并将其绘制到chartjs'画布上（祝贺你，你是也是你自己的图表小部件的一半：P）。

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 ).

获取画布的位图。

定义要搜索交叉点的范围

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).

逐行扫描（垂直）并测试每个像素的颜色值。您需要使用公差范围（+/- t％），因为画布像素是整数值，而混合的结果是浮点值。

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.

找到像素后，在值中添加增量以补偿线宽。绘制画布。

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

这篇关于Chart.js找到交点Point并绘制一个圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！