javascript - Chart.js 找到交点并画一个圆

Question

我正在使用 Chart.js 生成折线图。它对我来说很成功。但我需要在交点处画一个圆或点，并向“X”轴画一条线。可以请任何人帮我得到这个吗？

提前致谢。

Answer 1

使用 ChartJS 实现这一点(无论如何都不是 ChartJS 专家)的要点是:

方法 1 - 数学

步骤 1

除非您可以从 ChartJS 的内部获取经过处理的点数组，否则您必须手动将点数据集转换为表示绘制线的新点数组，因为 ChartJS 使用贝塞尔曲线来绘制图形。

您还必须像 Chartjs 一样考虑规模。由于 canvas 不为其贝塞尔曲线方法提供点，因此您必须计算它们 using for example this 。您需要选择一个分辨率并在数据集中的每个点之间生成新的段。

但请记住:您不能只使用一些随机控制点 - 您也必须像 Chartjs 那样为曲线复制这些控制点，因此您需要使用 its source 作为基础。

步骤 2

当两条线都是“贝塞尔曲线形式”时，您必须通过查找线的哪些段覆盖了您要检查的范围来限制要搜索的范围。

使用 line.x1 <= range.x1 <= line.x2 执行此操作对于要搜索的范围的 range.x2 也是如此(y 轴在此步骤中并不重要)。

您最终应该得到两个数组，其中的线段与范围匹配。

(当然，如果您不需要重复使用曲线而只需要单个线段，则可以在步骤 1 中找到线段并将其用于此步骤。

步骤 3

现在您需要循环遍历数组一。

对于数组一中的当前段，您需要使用 method such as this one 对数组二中的所有段进行相交测试。 (您可以通过检查两条线在 x 轴上是否有重叠来过滤测试数量)。

决赛

现在您可以提取交点(如果有)并将其绘制到 ChartJS 的 Canvas 上(恭喜您，您也已经完成了自己的图表小部件的一半:P)。

方法 2 - 暴力破解

步骤 1

获取 Canvas 的位图。

步骤 2

定义要搜索交集的范围

计算两条线相交处的合成颜色。这将是您搜索的颜色(您可以执行预处理，找到已知的交叉点并从该点读取像素值)。

步骤 3

逐行扫描(垂直)并测试每个像素的颜色值。您需要使用容差范围 (+/- t%)，因为 Canvas 像素是整数值，而混合结果是浮点值。

决赛

找到像素后，向该值添加增量以补偿线宽。绘制到 Canvas 。