BizCharts基于 G2 封裝的 React 圖表庫
BizCharts 是一個基于 G2 封裝的 React 圖表庫，具有 G2、React 的全部優(yōu)點(diǎn)，可以讓用戶以組件的形式組合出無數(shù)種圖表；并且集成了大量的統(tǒng)計(jì)工具，支持多種坐標(biāo)系繪制，交互定制，動畫定制以及圖形定制等等。相信 BizCharts 定能成為您的數(shù)據(jù)可視化項(xiàng)目的強(qiáng)力助手。
特性
基于 G2、React
健壯
穩(wěn)定
強(qiáng)大的擴(kuò)展能力
高自定義能力
安裝
通過 npm 引入
我們提供了 BizCharts npm 包，通過下面的命令即可完成安裝
npm install bizcharts --save
成功安裝完成之后，即可使用 import 或 require 進(jìn)行引用。
快速開始
在 BizCharts 引入頁面后，我們就已經(jīng)做好了創(chuàng)建第一個圖表的準(zhǔn)備了。
下面是以一個基礎(chǔ)的柱狀圖為例開始我們的第一個圖表創(chuàng)建。
-
創(chuàng)建容器
在頁面的 body 部分創(chuàng)建一個節(jié)點(diǎn)，指定一個 id
<div id="mountNode"></div>
使用組件生成圖表
引入圖表需要的組件
用組件組裝成需要的圖表
把圖表渲染到 mountNode 節(jié)點(diǎn)上
import React from 'react';import ReactDOM from 'react-dom';import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';// 數(shù)據(jù)源const data = [
{ genre: 'Sports', sold: 275, income: 2300 },
{ genre: 'Strategy', sold: 115, income: 667 },
{ genre: 'Action', sold: 120, income: 982 },
{ genre: 'Shooter', sold: 350, income: 5271 },
{ genre: 'Other', sold: 150, income: 3710 }
];// 定義度量const cols = { sold: { alias: '銷售量' }, genre: { alias: '游戲種類' }
};// 渲染圖表ReactDOM.render((
<Chart width={600} height={400} data={data} scale={cols}>
<Axis name="genre" />
<Axis name="sold" />
<Legend position="top" dy={-20} />
<Tooltip />
<Geom type="interval" position="genre*sold" color="genre" />
</Chart>
), document.getElementById('mountNode'));
一張柱狀圖就繪制成功了：
體驗(yàn)改進(jìn)計(jì)劃說明
為了更好服務(wù)用戶，G2 會將打點(diǎn)監(jiān)控，將 URL 等信息發(fā)送回 AntV 服務(wù)器，BizCharts 沒有關(guān)閉這個請求：https://kcart.alipay.com/web/bi.do
除了 URL 與 G2 版本信息外，不會收集任何其他信息，一切為了能對 G2 的運(yùn)行情況有更多了解，以更好服務(wù)于用戶。如有擔(dān)心，可以通過下面的代碼關(guān)閉：
// 關(guān)閉 G2 的體驗(yàn)改進(jìn)計(jì)劃打點(diǎn)請求（如：服務(wù)端渲染）BizCharts.track(false)