基于 G2 封装的 React 图表库 BizCharts

基于 G2 封装的 React 图表库 BizCharts

MIT
JavaScript
跨平台
阿里巴巴
2018-03-27
h4cd

BizCharts 是一个基于 G2 封装的 React 图表库,具有 G2、React 的全部优点,可以让用户以组件的形式组合出无数种图表;并且集成了大量的统计工具,支持多种坐标系绘制,交互定制,动画定制以及图形定制等等。相信 BizCharts 定能成为您的数据可视化项目的强力助手。

特性

  • 基于 G2、React

  • 健壮

  • 稳定

  • 强大的扩展能力

  • 高自定义能力

安装

通过 npm 引入

我们提供了 BizCharts npm 包,通过下面的命令即可完成安装

npm install bizcharts --save

成功安装完成之后,即可使用 import 或 require 进行引用。

快速开始

在 BizCharts 引入页面后,我们就已经做好了创建第一个图表的准备了。

下面是以一个基础的柱状图为例开始我们的第一个图表创建。

  1. 创建容器

    在页面的 body 部分创建一个节点,指定一个 id

    <div id="mountNode"></div>
  2. 使用组件生成图表

    • 引入图表需要的组件

    • 用组件组装成需要的图表

    • 把图表渲染到 mountNode 节点上

import React from 'react';import ReactDOM from 'react-dom';import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';// 数据源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'));

一张柱状图就绘制成功了:

体验改进计划说明

为了更好服务用户,G2 会将打点监控,将 URL 等信息发送回 AntV 服务器,BizCharts 没有关闭这个请求:https://kcart.alipay.com/web/bi.do

除了 URL 与 G2 版本信息外,不会收集任何其他信息,一切为了能对 G2 的运行情况有更多了解,以更好服务于用户。如有担心,可以通过下面的代码关闭:

// 关闭 G2 的体验改进计划打点请求(如:服务端渲染)BizCharts.track(false)

的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

阿里巴巴图表库 Bizcharts 正式开源

写在前面 阿里巴巴于去年开放了它的内部图表库 Bizcharts 初版,在这一年的时间里,Bizcharts 新增了许多特性,并对渲染细节及渲染性能进行大幅度的调优。 本文将简单的介绍阿里开源图表库 ...

2018/08/30 13:13
3.4K
2
Iceworks 2.7.0 发布,海量图表供你选择

Iceworks 2.7.0 发布,海量图表供你选择 Iceworks,丰富模板一键创建,提供多种垂直领域模板,快速创建项目,支持风格切换,满足个性化需求;轻松操作页面管理,海量物料自由搭配,页面组合可...

2018/08/31 12:36
39
0
React入门参考

React参考 基础知识介绍 前端发展史 静态页面阶段 AJAX 阶段 前端 MVC 阶段 SPA 阶段 Mvc:View Model 是简化的 Controller,所有的数据逻辑都放在这个部分。它的唯一作用就是为 View 提供处...

09/18 17:32
1
0
飞冰 - Ice Design Pro 使用指南

写在前面: 目前在飞冰中,我们提供了 21 套模板(后续会持续的增加),可以在 Iceworks 的模板界面根据需求选择合适的模板进行初始化项目,然后基于区块快速搭建页面进行二次开发,减少各种环...

2018/08/02 19:25
320
0
做可交互的统计图表,这套图形语法不容错过

选好可视化 “一图胜千言”,是最直观的数据可视化魅力。以图表来传达和沟通信息,其效率远超枯燥乏味的数据表达。 有需求就有市场。数据可视化崭露头角后,各个厂商出备的产品、解决方案,开...

06/10 15:44
11
0
做可交互的统计图表,这套图形语法不容错过

选好可视化 “一图胜千言”,是最直观的数据可视化魅力。以图表来传达和沟通信息,其效率远超枯燥乏味的数据表达。 有需求就有市场。数据可视化崭露头角后,各个厂商出备的产品、解决方案,开...

06/06 12:06
38
0
做可交互的统计图表,这套图形语法不容错过

选好可视化 “一图胜千言”,是最直观的数据可视化魅力。以图表来传达和沟通信息,其效率远超枯燥乏味的数据表达。 有需求就有市场。数据可视化崭露头角后,各个厂商出备的产品、解决方案,开...

06/06 10:54
17
0
这就是巨人的肩膀!2018年阿里巴巴开源的那些牛逼项目汇总

导读: 开源展示了人类共同协作,成果分享的魅力,每一次技术发展都是站在巨人的肩膀上,技术诸多创新和发展往往就是基于开源发展起来的,没有任何一家网络公司可以不使用开源技术,仅靠自身...

2018/12/21 16:21
105
0
2018年阿里巴巴重要开源项目汇总(持续更新中)

摘要: 云栖社区特在2018年年末,将阿里巴巴的一些重要的开源项目进行整理,希望对大家有所帮助。 开源展示了人类共同协作,成果分享的魅力,每一次技术发展都是站在巨人的肩膀上,技术诸多创...

2018/12/12 11:34
369
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部