在 Vue.js 中实现图表的功能是很常见的，而 Chartist.js 是一种简单和轻量级的图表库。同时，vue-chartist-plugin-threshold 是一个 Chartist.js 插件，它可以帮助我们实现阈值的图表。本文主要介绍 vue-chartist-plugin-threshold 的安装和使用方法。
安装
使用 npm 安装 vue-chartist-plugin-threshold：
npm install vue-chartist-plugin-threshold --save
在项目中使用：
import VueChartistPluginThreshold from 'vue-chartist-plugin-threshold' Vue.use(VueChartistPluginThreshold)
现在，我们已经成功安装了 vue-chartist-plugin-threshold 插件。
使用方法
首先，引入所需的依赖：
import VueChartist from 'vue-chartist' import VueChartistPluginThreshold from 'vue-chartist-plugin-threshold'
其次，在 template 中定义并配置一个 Chartist 折线图：
-- -------------------- ---- -------
----------
---- ------------------------
-------------
------------
------------------
------------
------------------
--
------
------------- -------------------- ---- -------
------ ------- -
---- -- -
------ -
----- -
------- ------- ------ ------ ------ ------ ------ -------
------- -
--- --- --- -- -- -- ----
--- -- -- -- --- -- --
-
--
-------- -
---- --
--------- ----
--
----- -------
-------- -
----------------------------
---------- -
--
-
-
-
-在这个例子中，我们引入了 vue-chartist，并设置了一个 Line 类型的折线图。我们还设置了 data，options 和 plugins。
接下来，我们使用 vue-chartist-plugin-threshold：将插件包含在我们的 plugins 数组中，并传入 threshold 参数。这意味着，所有小于五的值都会被设置为红色。
示例代码
下面的代码展示了如何使用 vue-chartist-plugin-threshold：
index.html
-- -------------------- ---- ------- --------- ----- ------ ------ ------------- -------- -------------- ----- ---------------- ----- --------------- ---------------------------- ------------------- ------- ------ ---- --------------- ------- ------------------------------------- ------- ---------------------------------------------- ------- --------------------------------------------------------------- ------- ---------------------- ------- -------
app.js
-- -------------------- ---- -------
------ ----------- ---- --------------
------ -------------------------- ---- -------------------------------
-----------------------------------
--- -----
--- -------
----------- -
-----------
--
----- -------- -- -
------ -
----- -
------- ------- ------ ------ ------ ------ ------ -------
------- -
--- --- --- -- -- -- ----
--- -- -- -- --- -- --
-
--
-------- -
---- --
--------- ----
--
----- -------
-------- -
----------------------------
---------- -
--
-
-
-
--在本文中，我们已经学会了如何使用 vue-chartist-plugin-threshold 创建一个具有阈值的 Chartist.js 折线图。在实际项目开发中，我们可以根据不同的需求定制自己的图表。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005553281e8991b448d264d