在前端开发过程中，常常需要使用图表来展示数据。而 Chartist 是一个轻量级的图表库，它提供了多种图表类型，可以满足各种需求。此外，Chartist 还提供了可定制的 插件，本文主要介绍其中的一个插件：chartist-plugin-screentips-custom。
1. 安装
在使用 chartist-plugin-screentips-custom 插件之前，我们需要先安装 Chartist 和 chartist-plugin-screentips-custom 两个 npm 包。
npm install chartist chartist-plugin-screentips-custom
安装完成后，我们就可以在项目中引用它们了。
2. 使用
chartist-plugin-screentips-custom 插件能够在 Chart.js 图表的每个触点上添加一个自定义的提示框，当鼠标指针移到数据点上时会显示。以下是该插件的使用步骤：
在 JavaScript 文件中引入 Chartist 和 chartist-plugin-screentips-custom：
var Chartist = require('chartist'); var customTooltipsPlugin = require('chartist-plugin-screentips-custom');创建一个 Chartist 图表：
-- -------------------- ---- ------- --- ----- - --- -------------------------- - ------- ------ ----- ----- ----- ------ ------- - --- -- -- -- --- --- -- -- -- --- --- -- -- -- --- - -- - ------- -------- -------- - ---------------------- ----------- -------------- ------ - ------ ----- ----------------- - ----- - --------- - -- - ---此处创建了一个折线图。注意在第三个参数中添加了一个 plugins 数组，其中包含了要使用的 chartist-plugin-screentips-custom 插件，并且同时传入了一个 tooltipFnc 函数来定义提示框的内容。
在 HTML 文件中创建一个容器：
<div class="ct-chart"></div>
在 CSS 文件中定义提示框的样式：
-- -------------------- ---- ------- --------- -------- - --------- --------- -------- ----- ----------------- ----- ------ ----- -------- ---- - --------------- -------- - -------- ------ -
这里的样式是可自定义的。在示例中，提示框的背景色为黑色，文字为白色，鼠标悬浮时显示。
3. 示例
下面是一个完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
--------------- ------ ---------- ------ ------------
----- ---------------- --------------------------------------------------------------------
------ ----------------
--------- -------- -
--------- ---------
-------- -----
----------------- -----
------ -----
-------- ----
-
--------------- -------- -
-------- ------
-
--------
-------
------
---- -----------------------
------- ---------------------------------------------------------------------------
------- -----------------------------------------------------------------------------------------
------- ----------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------------
------- ---------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------
------- --------------------------------------------------------------------------------------------------------------------------
--------
--- ----- - --- -------------------------- -
------- ------ ----- ----- ----- ------
------- -
--- -- -- -- ---
--- -- -- -- ---
--- -- -- -- ---
-
-- -
------- --------
-------- -
--------------------------
--------- --------
---------- ---------
---
--------------------------
----------------------------
----- ----
---------- ------
------- -
-- --
-
---
----------------------------
----- ----
---------- -----
------- -
-- ---
-- --
-
---
-------------------------------
-----------------------
------- --------------- ------ --
---
-----------------------------
------------ --
----- -------
--- --
--- --
--- --
--- --
-------- -
------ -
-------- ------
-------- --------- ------------- -----------
------- -
-- ---
-- --
-
-
-
--
---
--------------------------------
----------- -------------- ------ -
------ ----- ----------------- - ----- - ---------
-
--
-
---
---------
-------
-------4. 总结
本文介绍了如何在 Chartist 图表中使用 chartist-plugin-screentips-custom 插件，并给出了使用示例。通过学习本文，读者可以更好地了解该插件的使用方法，从而在实践中更快更好地应用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005675781e8991b448e3d32