在前端数据可视化中，经常需要在图表中绘制一条垂直参考线。Chart.js 是一个流行的 JavaScript 数据可视化库，它提供了丰富的图表类型和配置选项，并且易于使用。本文将介绍如何使用 Chart.js 绘制任意垂直线。
步骤
- 导入 Chart.js 库和对应的 CSS 文件：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.css"> <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js"></script>
- 创建一个 Canvas 元素作为图表容器：
<canvas id="myChart"></canvas>
- 初始化图表对象并设置配置选项：
-- -------------------- ---- -------
----- --- - ----------------------------------------------------
----- ------- - --- ---------- -
----- -------
----- -
------- ------- ------ ------ ------ ------ -------
--------- --
------ --------
----- ---- --- -- -- -- ---
------------ -------
--
--
-------- -
-------- -
-- ------ ------------ ---
------------- -
-- -----
-------- ------
-- --------
-- -----
-- -------
------------ -------
------------ --
----------- --- ---
-
--
-- ----
--------- --------------- -
----- ------ - -----------------------------------
-- ------- -- -------------- -- -------- --- ----- -
----- --- - ----------
----- - - ------------------------------------------
-----------
----------------
--------------- - -------------------
------------- - -------------------
-----------------------------------
------------- ---------------------
------------- ------------------------
-------------
--------------
-
-
-
---- 使用插件绘制垂直线：
// 显示垂直线并设置位置 myChart.options.plugins.verticalLine.display = true; myChart.options.plugins.verticalLine.x = 'Mar'; // 更新图表 myChart.update();
解析
上面的代码定义一个名为 verticalLine 的插件，它在图表渲染时会根据配置选项绘制一条垂直线。该插件包含以下配置选项：
display: 是否显示垂直线，默认为false。x: 垂直线的位置，可以是一个数据点的值或者索引，也可以是一个日期字符串。borderColor: 线条颜色，默认为#000。borderWidth: 线条宽度，默认为1。borderDash: 线条样式，可以是一个数组，如[5, 5]表示虚线。默认为[]。
插件的实现依赖于 Chart.js 提供的 onRender 配置选项。该选项指定一个回调函数，在每次图表渲染时被调用。在回调函数中，我们检查是否需要绘制垂直线，并使用 Canvas API 绘制线条。
为了计算垂直线的位置，我们使用了 Chart.js 提供的 getPixelForValue 方法。该方法接受一个数据点的值或者索引，返回对应的像素坐标。
最后，我们通过修改插件的配置选项并调用 update 方法更新图表，从而绘制垂直线。
示例
下面是一个完整的示例代码，它绘制了一个带有垂直参考线的折线图：
> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/27988) ，转载请注明来源 [https://www.javascriptcn.com/post/27988](https://www.javascriptcn.com/post/27988)