npm 包 araba 使用教程

阅读时长 4 分钟读完

什么是 araba?

araba 是一款基于 React 和 D3.js 的可视化图表库,帮助开发者在网页端快速构建高质量的数据可视化图表。

安装

使用 npm 安装 araba:

引入

在项目中需要用到的地方引入 araba:

或者

使用

BarChart

BarChart 是 araba 提供的柱状图组件,用于展示数据的柱状图。

-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------

----- ---- - -
  - ----- ---- ------ -- --
  - ----- ---- ------ -- --
  - ----- ---- ------ -- --
  - ----- ---- ------ -- --
--

----- --- - -- -- -
  ------ -
    ---------
      -----------
      --------
      ---------
      ------------
      -----------
      --------
        ------ -------
        ------------- ---
      --
      --------
        ------ --------
        ------------- --
      --
    --
  --
--

------ ------- ----
展开代码

上述代码会生成如下图表:

LineChart

LineChart 是 araba 提供的折线图组件,用于展示数据的折线图。

-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- --------

----- ---- - -
  - ----- ---- ------ -- --
  - ----- ---- ------ -- --
  - ----- ---- ------ -- --
  - ----- ---- ------ -- --
--

----- --- - -- -- -
  ------ -
    ----------
      -----------
      --------
      ---------
      ------------
      -----------
      --------
        ------ -------
        ------------- ---
      --
      --------
        ------ --------
        ------------- --
      --
    --
  --
--

------ ------- ----
展开代码

上述代码会生成如下图表:

PieChart

PieChart 是 araba 提供的饼状图组件,用于展示数据的饼状图。

-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- --------

----- ---- - -
  - ----- ---- ------ -- --
  - ----- ---- ------ -- --
  - ----- ---- ------ -- --
  - ----- ---- ------ -- --
--

----- --- - -- -- -
  ------ -
    ---------
      -----------
      ---------------
      --------------
      ------------
      -----------
      ---------
      -------------- -- -----------
      ------
    --
  --
--

------ ------- ----
展开代码

上述代码会生成如下图表:

结语

araba 提供了易于使用、扩展和自定义的图表组件,帮助前端开发者更快速、更方便地展示数据。在项目中使用 araba,能够提高项目开发速度和代码质量。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/600671d730d0927023822daa

纠错
反馈

纠错反馈