什么是 araba?
araba 是一款基于 React 和 D3.js 的可视化图表库,帮助开发者在网页端快速构建高质量的数据可视化图表。
安装
使用 npm 安装 araba:
npm install araba --save
引入
在项目中需要用到的地方引入 araba:
import { BarChart } from 'araba';
或者
const { BarChart } = require('araba');
使用
BarChart
BarChart 是 araba 提供的柱状图组件,用于展示数据的柱状图。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- -------- ----- ---- - - - ----- ---- ------ -- -- - ----- ---- ------ -- -- - ----- ---- ------ -- -- - ----- ---- ------ -- -- -- ----- --- - -- -- - ------ - --------- ----------- -------- --------- ------------ ----------- -------- ------ ------- ------------- --- -- -------- ------ -------- ------------- -- -- -- -- -- ------ ------- ----展开代码
上述代码会生成如下图表:
LineChart
LineChart 是 araba 提供的折线图组件,用于展示数据的折线图。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- - ---- -------- ----- ---- - - - ----- ---- ------ -- -- - ----- ---- ------ -- -- - ----- ---- ------ -- -- - ----- ---- ------ -- -- -- ----- --- - -- -- - ------ - ---------- ----------- -------- --------- ------------ ----------- -------- ------ ------- ------------- --- -- -------- ------ -------- ------------- -- -- -- -- -- ------ ------- ----展开代码
上述代码会生成如下图表:
PieChart
PieChart 是 araba 提供的饼状图组件,用于展示数据的饼状图。
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- -------- ----- ---- - - - ----- ---- ------ -- -- - ----- ---- ------ -- -- - ----- ---- ------ -- -- - ----- ---- ------ -- -- -- ----- --- - -- -- - ------ - --------- ----------- --------------- -------------- ------------ ----------- --------- -------------- -- ----------- ------ -- -- -- ------ ------- ----展开代码
上述代码会生成如下图表:
结语
araba 提供了易于使用、扩展和自定义的图表组件,帮助前端开发者更快速、更方便地展示数据。在项目中使用 araba,能够提高项目开发速度和代码质量。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822daa