Chart.js查找交点Point并绘制一个圆

时间:2015-03-04 02:44:54

标签: javascript html5-canvas chart.js

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

提前致谢。

1 个答案:

答案 0 :(得分:3)

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

方法1 - 数学

第1步

除非你能从chartjs获得一个经过处理的点数组'因为chartjs使用Bezier曲线绘制图形,手动将点数据集转换为表示绘制线的新点阵列,因此您必须使用内部构件。

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

请记住:你不能只使用一些随机控制点 - 你也必须像曲线图一样复制这些曲线,所以你需要使用 its source 作为基础。

第2步

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

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

你最终应该有两个阵列,其中的线段与范围相匹配。

(当然,如果您不需要重复使用曲线并且只需要一个段,您只需在步骤1中找到这些段并将其用于此步骤。)

第3步

现在你需要循环遍历数组。

对于阵列1中的当前段,您需要使用 method such as this one 对阵列2中的所有段进行相交测试(您可以通过检查是否过滤掉测试次数来这两条线在x轴上有任何重叠。)

最终

现在你可以提取相交点(如果有的话)并将其绘制到chartjs&#39;画布(祝贺你,你也是你自己的图表小部件的一半:P)。

方法2 - 暴力

第1步

获取画布的位图。

第2步

定义要搜索交叉点的范围

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

第3步

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

最终

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