介绍
Epoch.js 是一个小型的开源 JavaScript 库，用于在 Web 应用程序和网站中实现时间轴和时间序列图。 该库使用 SVG 进行绘图，支持区域、线条和热图等常用的可视化图形，为时间序列数据提供了一种简单、灵活、易于使用的方法。
安装
我们可以使用 npm 包管理器在本地安装 Epoch.js
npm install epochjs --save
安装完成后，你可以在项目中引入 Epoch.js
import Epoch from 'epochjs';
基本用法
Epoch.js 非常适合绘制时间序列图表。我们来创建一个简单的折线图作为示例。
首先，我们创建两个数组，一个表示时间戳，另一个表示数据值。
-- -------------------- ---- ------- ----- ---- - - ------ ------------- ------ ---- ------ ------------- ------ ---- ------ ------------- ------ ---- ------ ------------- ------ ---- ------ ------------- ------ ---- ------ ------------- ------ ---- ------ ------------- ------ ---- -- ----- ---------- - ------------- -- --- --------------------------- ----- ------ - ------------- -- ------------
接着，我们使用 Epoch.js 创建一个时间序列图表
-- -------------------- ---- -------
----- ----- - --- -------
----- ------------
----- --
------ --- ------
------- -------
----------- ----------
---
------ ------ ---
------ ----
------- ---
---
----------------------------这个时间序列图表将用折线的形式显示数据。 timestamps 数组是必需的，它用于指定时间序列数据的时间戳。 width 和 height 属性用于指定图表的尺寸。
高级用法
Epoch.js 支持许多其他类型的图表和属性。 我们可以设置坐标轴样式，添加注释和自定义渲染器。 我们来看看一些更高级的用法。
自定义渲染器
你可以使用 Epoch.js 的 renderer 属性设置自定义渲染器。 以下示例演示如何使用自定义渲染器来添加一个简单的自定义标签。
-- -------------------- ---- -------
----- -------------- - ----- -- -- -
----- ---- - ----------------
---------- ----
---------- ----
-------------------- -------- -- ---------
------------- ------- -- --------
--
----- ----- - --- -------
----- ------------
----- --
------ --- ------
------- -------
----------- ----------
---
------ ----
------- ----
--------- --------------
---
----------------------------区域图表
我们可以将区域图表用于表示一个区域内的数据变化。 使用 type: time.area，我们可以创建一个面积图。
-- -------------------- ---- -------
----- ----- - --- -------
----- ------------
----- --
------ --- ------
------- -------
----------- ----------
---
------ ------ ---
------ ----
------- ---
---
----------------------------热图
我们可以创建热图用于显示区域的密度。使用 type: heatMap，我们可以创建一个热图。
-- -------------------- ---- -------
----- ----- - --- -------
----- ----------
----- -
------ ------- ------- --- -- -- -- ----
------ ------- ------- --- -- -- -- -----
------ ------- ------- --- -- -- -- ----
------ ------- ------- --- -- -- -- ----
------ ------- ------- --- -- -- -- ---
--
------ ----
------- ---
---
----------------------------总结
Epoch.js 提供了一个简单、灵活和易于使用的方法来绘制时间轴和时间序列图表。该库使用 SVG 进行绘图，支持区域、线条和热图等常用可视化图形。 我们可以设置坐标轴样式，添加注释和自定义渲染器。在了解了 Epoch.js 基本用法后，我们可以创建出更复杂，更具吸引力的可视化图表，将时间序列数据更直观地展示给用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e26a563576b7b1ecfcb