介绍
chartist-trends 是一个基于 Chartist.js 的 npm 包，用于绘制带有趋势线的图表。趋势线是非常有用的数据分析工具，可以帮助我们更好地理解我们手头的数据。chartist-trends 库为我们提供了非常简便的实现方式。
安装
要安装 chartist-trends，你需要使用 npm：
--- ------- ---------------
使用
在你的 HTML 页面中引入 Chartist.js 和 chartist-trends.js。你可以从 node_modules 目录中复制它们，也可以通过 npm 包中提供的 dist 目录下的文件使用：
---- -- ----------- - ------------------ ---
------- ------------------------------------
------- -------------------------------------------
---- ---- --------------- ---------- ---
--------
--- -------------------------- -
------- ------ ----- ----- ----- ----- ----- ------
------- -
---- --- --- --- --- --- ----
---- --- -- --- --- --- ---
-
-- -
---- --
--------- -----
-------- -
-------------------------
------- --
----- -----
-------- -
------- -
-
--
-
---
---------
---- --- --------- -------- --- ----------- ---
---- -----------------------选项
chartist-trends 支持很多有用的选项，这些选项可以控制趋势线的样式、计算和展示方式。
series - 趋势线所在的序列号
- ------- -- -- --- -
series 选项指定了趋势线所在的序列号。如果你有一个数据集，其中包含多个数据序列，那么你可以通过这个选项指定使用哪个数据序列来计算趋势线。
type - 趋势线类型
- ----- ----- -- --- -
type 选项指定了趋势线的类型。chartist-trends 支持多种类型的趋势线：
MA: 移动平均线Linear: 线性回归趋势线POLY: 多项式回归趋势线Exp: 指数平滑趋势线LOESS: Locally Estimated Scatterplot Smoothing
其中，MA 类型需要配置 options.period，POLY 类型需要配置 options.degree，其它类型不需要额外的选项。
options - 趋势线选项
-
-------- -
------- --
-- ---
-
-options 选项指定了每个趋势线类型的特定设置。不同的类型需要不同的选项，具体取决于你使用的趋势线类型。
period - 移动平均线周期
-
----- -----
-------- -
------- -
-
-period 选项用于指定 MA 类型趋势线的移动平均线周期，默认值为 2。
degree - 多项式回归趋势线次数
-
----- -------
-------- -
------- -
-
-degree 选项用于指定 POLY 类型趋势线的次数，默认值为 2。
className - 趋势线 DOM 元素的类名
- ---------- ---------------- -- --- -
className 选项可以指定趋势线 DOM 元素的类名，默认值为 ct-trend-line。如果你需要自定义趋势线的样式，那么你可以使用这个选项。
showXLabels - 是否展示趋势线的 X 轴标签
- ------------ ----- -- --- -
showXLabels 选项决定是否展示趋势线的 X 轴标签，默认值为 true。
showYLabels - 是否展示趋势线的 Y 轴标签
- ------------ ----- -- --- -
showYLabels 选项决定是否展示趋势线的 Y 轴标签，默认值为 true。
showTrendLabel - 是否展示趋势线标签
- --------------- ----- -- --- -
showTrendLabel 选项决定是否展示趋势线的标签，默认值为 true。
trendLineLength - 趋势线长度
- ---------------- -- -- --- -
trendLineLength 选项决定趋势线的长度（单位：渲染像素值），默认值为 5。
trendLineOffset - 趋势线偏移量
- ---------------- -- -- --- -
trendLineOffset 选项决定趋势线的偏移量（单位：渲染像素值），默认值为 0。
trendLineColor - 趋势线颜色
- --------------- ------ -- --- -
trendLineColor 选项决定趋势线的颜色，可以为任意的 CSS 颜色值，默认值为 red。
示例代码
下面是一个完整的 chartist-trends 使用示例，它展示了一个简单的折线图，并为其添加了线性回归趋势线：
--------- -----
------
------
---------------------- ----------
----- ----------------
----- ---------------- -----------------------------
-------
--------- -------------------- -
---------- -----
----- -----
-
--------
-------
------
---- ---------------- ------------- ------ ------- --------------
------- ------------------------------------
------- -------------------------------------------
--------
--- ---- - -
------- ------ ----- ----- ----- ----- ----- ------
------- -
---- --- --- --- --- --- ----
---- --- -- --- --- --- ---
-
--
--- ------- - -
--------- -----
-------- -
-------------------------
------- --
----- --------
--
-
--
--- ----- - --- -------------------------- ----- ---------
---------
-------
-------在这个示例中，我们使用 Chartist 绘制了一个折线图，数据集包含两个序列。然后，我们使用 Chartist.plugins.trends() 函数添加了一个线性回归趋势线（type: 'Linear'）。注意，我们将 series 设置为 1，这意味着我们使用数据集中的第二个序列来计算趋势线。
最后，我们为趋势线标签添加了自定义样式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005661081e8991b448e1f1b