介绍
juttle-viz 是一款前端可视化库，它是在 juttle 运算引擎的基础上构建而成的。juttle-viz 提供了多种常见的可视化类型，例如折线图、柱状图、散点图等，并支持自定义可视化的配置。
安装
使用 npm 安装 juttle-viz ：
npm install juttle-viz --save
同时也需要安装 juttle 运算引擎：
npm install juttle --save
使用
导入 juttle-viz
在需要使用 juttle-viz 的文件中，首先需要导入 JuttleViz 组件。
import { JuttleViz } from 'juttle-viz';配置 juttle-viz
JuttleViz 组件提供了多种可视化类型配置，以及自定义配置功能。以下是一个简单的折线图的使用例子：
<JuttleViz type="line" data={data} config={{width: 600, height: 400}}>
<JuttleViz.Axis name="x" label="时间" />
<JuttleViz.Axis name="y" label="数量" />
<JuttleViz.Line field="value" />
</JuttleViz>在这个例子中，我们首先选择了折线图（type="line"），并传入需要可视化的数据（data），以及可视化的配置信息（config）。接着，我们添加了两个坐标轴，并分别设置了它们的名称和标签。最后，我们使用 Line 组件将数据中的某个字段可视化为折线。
数据格式
在使用 juttle-viz 进行数据可视化之前，需要先将数据整理为特定格式。juttle-viz 支持以下两种数据格式：
Array of Objects 格式
const data1 = [
{time: '2017-01-01', value: 12},
{time: '2017-01-02', value: 23},
{time: '2017-01-03', value: 34},
{time: '2017-01-04', value: 45},
...
]Array of Arrays 格式
const data2 = [ [ '2017-01-01', 12 ], [ '2017-01-02', 23 ], [ '2017-01-03', 34 ], [ '2017-01-04', 45 ], ... ]
在这两种格式中，第一列通常表示时间轴（x 轴），第二列表示数值轴（y 轴）。
自定义可视化
juttle-viz 提供了多种可视化类型的配置，可以让我们轻松构建出所需要的可视化效果。同时，我们也可以自定义可视化组件，以应对一些特殊需求。以下是一个简单的自定义组件的使用例子：
-- -------------------- ---- -------
------ - ---------- -------- - ---- -------------
------ - ---- -------------
----- ------------------- - ------------------------------- ----- ------------------- ------- ------------------- -
-------- -
-- ------ ------------- ------
-
---
---------- ------------- ------------
-------------------- ---------------------- -------------- --
------------在这个例子中，我们首先定义了一个名为 CustomVisualization 的组件，并继承自 JuttleViz.Component。这个组件实现了一些自定义的可视化逻辑。接着，我们使用 register 函数将这个组件注册到 juttle-viz 中。最后，我们在 JuttleViz 中指定可视化类型为 custom，并将 CustomVisualization 组件添加到可视化列表中。
总结
juttle-viz 是一款实用的前端可视化库，它提供了丰富的可视化类型，并提供了自定义配置和组件的功能。通过本文的学习，相信您已经能够轻松使用 juttle-viz 构建出自己所需要的可视化效果了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066ef94c49986ca68d87ba