简介
ianaya89/janeway 是一个基于 React 和 D3.js 的图表库，支持多种类型的数据可视化，如条形图、饼图、散点图等。它具有可定制性强、易于使用的特点，适用于前端数据可视化开发。使用 npm 包 janeway 可以轻松在项目中使用该图表库。
安装
在项目根目录中执行以下命令：
npm install janeway --save
快速入门
下面简要介绍 janeway 的使用方法。以一个简单的条形图为例：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ----------
----- ---- - -- ----- ---- ------ -- -- - ----- ---- ------ -- -- - ----- ---- ------ -- ---
----- ---------- - -- -- -
------ -
--------
-----------
----------
----------
-----------
----------
--------- ------------
----------- -- ---- -------
----------- -- ---- -------
------- ----
------ ----
--
--
--
--
------ ------- -----------在以上示例中，我们传入了一些需要注意的属性。
data：数据，janeway 数据格式为数组，格式参考{ name: 'A', value: 10 }，即每个元素都要有name和value两个属性。type：图表类型，目前 janeway 支持多种类型，如条形图、饼图、散点图等。x：x 轴属性，通过这个属性指定 x 轴上的数据。在以上示例中即为数据中的name。y：y 轴属性，通过这个属性指定 y 轴上的数据。在以上示例中即为数据中的value。options：可选项，用于自定义图表效果。在以上示例中我们指定了柱状图的颜色、x、y 轴标题，以及图表的宽高等。
更详细用法可以参考janeway 的官方文档
开发指南
1. 数据格式
janeway 的数据格式要求每一个元素都要有两个属性 name 和 value。name 属性用于显示在 x 轴上，value 属性用来表示 y 轴上的值。以下为一个示例数据：
const data = [
{ name: 'A', value: 10 },
{ name: 'B', value: 20 },
{ name: 'C', value: 30 },
{ name: 'D', value: 40 },
{ name: 'E', value: 50 },
];2. 图表类型
janeway 支持多种图表类型，可以通过 type 属性来指定。以下为一些示例：
柱状图（bar）
<Janeway data={data} type="bar" x={'name'} y={'value'} />饼图（pie）
<Janeway data={data} type="pie" x={'name'} y={'value'} />散点图（scatter）
<Janeway data={data} type="scatter" x={'name'} y={'value'} />3. 自定义样式
可以使用 options 属性自定义图表样式，以下是一些可选项：
barColor：柱状图颜色。lineColor：折线图颜色。circleColor：散点图颜色。backgroundColor：背景颜色。xAxisTitle：x 轴标题。yAxisTitle：y 轴标题。width：图表宽度。height：图表高度。
以下是一些示例：
-- -------------------- ---- -------
--------
-----------
----------
----------
-----------
----------
--------- ------------
----------- -- ---- -------
----------- -- ---- -------
------- ----
------ ----
--
--总结
janeway 是一个易于使用的数据可视化库，在前端开发中使用起来非常方便。本篇文章简单介绍了 janeway 的安装、快速入门和开发指南，希望对大家能有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/69494