Chart.js 查找交点并画一个圆

Question

我正在使用 chart.js 来生成折线图。它成功地工作了我。但我需要在 Intersection 处画一个圆或点，并在“X”轴上画一条线。你能请任何人帮我得到这个吗？

提前致谢。

Answer 1

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

方法 1 - 数学

步骤 1

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

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

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

第二步

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

使用line.x1 <= range.x1 <= line.x2 执行此操作，对于要搜索的范围的 range.x2 执行相同操作（y 轴在此步骤中并不重要）。

您最终应该有两个具有与范围匹配的线段的数组。

（当然，如果你不需要重复使用曲线而只需要一个线段，你可以在步骤 1 中找到这些线段并在这一步中使用）。

第三步

现在你需要遍历数组一。

对于数组 1 中的当前段，您需要使用 method such as this one 对数组 2 中的所有段进行交叉测试（您可以通过检查两个线在 x 轴上有任何重叠）。

决赛

现在您可以提取相交点（如果有）并将其绘制到 chartjs 的画布上（恭喜，您也已完成自己的图表小部件的一半：P）。

方法 2 - 蛮力

步骤 1

获取画布的位图。

第二步

定义一个你想搜索交集的范围

计算两条线相交处的合成颜色。这将是您搜索的颜色（您可以做一个预先步骤，定位一个已知的交叉点并从该点读取像素值）。

第三步

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

决赛

找到像素后，为该值添加一个增量以补偿线宽。绘制到画布上。