在 Web 开发中，时间序列图在很多场景下都是非常常见的需求，例如股票行情跟踪、天气变化图表等。而 @activfinancial/time-series-chart 就是一个为了方便时间序列数据展示而设计的 npm 包。本文将介绍如何使用该包。
包的安装
在开始之前，你需要先安装 npm。
使用下面的命令来安装 @activfinancial/time-series-chart 包：
npm install @activfinancial/time-series-chart
使用示例
以下一个简单的 HTML 页面作为示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------------------------- ------------
------- ---------------------------------------------
------- ----------------------------------------------------------------------------------------------
-------
------
---- -----------------
--------
----- ---- - -
------ -------------- ----- ------ ----- ------ ---- ------ ------ -------
------ -------------- ----- ----- ----- ----- ---- ----- ------ ------
------ -------------- ----- ------ ----- ------ ---- ------ ------ -------
------ -------------- ----- ------ ----- ------ ---- ------ ------ -------
------ -------------- ----- ----- ----- ----- ---- ----- ------ ------
-
----- ----- - --- -----------------
--- ---------
-----
------ ----
------- ----
--
---------
-------
-------该示例代码展现了一个简单的页面，使用 @activfinancial/time-series-chart 以及 d3.js 库来展示一个时间序列图。
包的详细使用说明
该包的具体使用说明如下：
创建一个 TimeSeriesChart 实例
你可以使用如下代码创建一个 TimeSeriesChart 实例：
-- -------------------- ---- -------
----- ----- - --- -----------------
--- --------- -- --- --- --- ---
------ ---- -- -----
------- ---- -- -----
------- - -- -----
---- ---
------ ---
------- ---
----- ---
--
----- --- -- -------
--数据格式
data 必须为数组。可以使用如下格式：
-- -------------------- ---- -------
-
-
----- ---------- -- ---- --------
----- ---------
----- ---------
---- ---------
------ ---------
-- ---------
--
-- ---- ---
-数据可选项
数据中的对象可以包含如下的可选属性，用于更丰富的数据展示：
- volume: 交易量
- buyVolume: 买入交易量
- sellVolume: 卖出交易量
示例：
-- -------------------- ---- -------
-
-
----- --- -------------------
----- ---
----- ---
---- --
------ ---
------- -----
---------- ----
----------- ----
--
-- ---- ---
-坐标轴可选项
你可以用如下代码配置坐标轴选项：
-- -------------------- ---- -------
-------------------
-- -
------ -----
------- ----------
--
-- -
------ -----
---------- --
--
--- x.label: x 轴标签
- x.format: 时间格式化字符串（参考 d3.js 时间格式化文档）
- y.label: y 轴标签
- y.precision: y 轴精度
颜色可选项
你可以用如下代码配置图表中的颜色：
chart.colorOptions({
up: 'red', // 上升的颜色
down: 'green', // 下降的颜色
volume: 'grey', // 交易量的颜色（默认为 #4682B4）
})限制精度
你可以使用 chart.limitPrecision 方法控制精度。如果你需要将图表中的数据精确到小数点后两位，你可以这么做：
chart.limitPrecision(2);
详细的使用教程请查看项目仓库中的文档和示例代码。
结语
@activfinancial/time-series-chart 提供了一种方便的方法来为时间序列数据添加一个漂亮的图表。如果你需要时间序列图表，那么该包是一个非常不错的选择。感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/138365