介绍
cxviz-timeseries 是一个基于 D3.js 的可视化库，用于绘制时间序列图。它提供了多种时间序列图类型，比如折线图、面积图、散点图、热力图等等。它还提供了多种时间筛选器，比如范围选择器、步进选择器、时间截取器等等。它的 API 灵活、易用，支持定制化的设置和样式。
安装
你可以通过 npm 安装 cxviz-timeseries：
npm install cxviz-timeseries
cxviz-timeseries 现在已经支持 ES6 模块和 CommonJS 打包方式。你可以在你的应用中使用这些方式：
ES6:
import * as cxviz from 'cxviz-timeseries';
CommonJS:
var cxviz = require('cxviz-timeseries');使用
让我们来看一下如何在你的项目中使用 cxviz-timeseries。
创建图表容器
cxviz-timeseries 基于 D3.js 开发，因此必须先创建一个 SVG 容器，用于渲染图表。你可以使用 D3.js 提供的方法或者手动创建一个 SVG 元素。
<div id="viz-container"></div>
var container = d3.select('#viz-container')
.append('svg')
.attr('width', 500)
.attr('height', 300);创建数据源
接着，我们需要为图表创建数据源。cxviz-timeseries 支持多种数据格式，比如 CSV、JSON、TSV、JSONP 等等。在这个例子中，我将使用 CSV 格式的数据源。
date,value 2016-01-01,10 2016-01-02,20 2016-01-03,30 2016-01-04,40 2016-01-05,50
-- -------------------- ---- -------
--------------------------- -------------- -
-- - ---- ----------
------------------------ -
------ - --- -------------
------- - ---------
---
-- -------
--- ---------- - --------------------------- ----- -
-- -------
-- --------
----- ------
---
---更多设置
cxviz-timeseries 提供多种配置选项，用于定制化图表的表现形式，比如线条颜色、坐标轴标签、时间筛选器类型等等。你可以通过传递一个包含配置选项的对象到 cxviz.timeseries 方法中，来指定这些选项。
-- -------------------- ---- -------
--- ---------- - --------------------------- ----- -
-- -------
-- --------
----- -------
------ -------
------ - ------ ---- --
------ - ------ ---- --
----------- -
----- --------
------ ---- ---------- -- --- --- ---------- -- ---
-
---总结
在这篇文章中，我们介绍了如何使用 npm 包 cxviz-timeseries 来绘制时间序列图。我们看到了如何创建图表容器、数据源，以及如何配置图表的选项。希望这篇文章对你有帮助！如果你有任何问题或建议，可以在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc31cb5cbfe1ea0612103