alibaba / bizcharts

Powerful data visualization library based on G2 and React.

通知

亲爱的用户朋友们：
由于组织架构调整，BizCharts 将不再维护 官网站点数据库将于 6 月后下线。
所有文档资料现已完整迁移至本仓库的 docs 目录，欢迎查阅和使用。
感谢大家多年来的支持与陪伴！后续如需继续使用图表组件，推荐迁移至 AntV 生态。AntV API 与 BizCharts 同源，迁移成本低，且社区活跃。
如需迁移协助，DeepSeek 可为您提供智能迁移和答疑服务。如果您的项目仅需维护，无需新功能开发，也可直接通过 DeepSeek 获得技术支持。
再次感谢大家一路以来的信任与支持！

BizCharts

New charting and visualization library has been released: https://bizcharts.taobao.com/products/bizCharts.

Features

• React ES6 grammar
• Easy to use
• Strong expansion capability
• Support most data visualization charts

See more demos.

Releases

• v3.5.x: https://bizcharts.taobao.com/product/bizcharts/gallery
• V4.0.0: https://bizcharts.taobao.com/product/BizCharts4/gallery

Upgrade document: https://bizcharts.taobao.com/product/BizCharts4/category/61/page/104

Installation

npm

$ npm install bizcharts

umd

 <script src="https://unpkg.com/bizcharts@${version}/umd/BizCharts.min.js"></script>

Dev build

$ git clone https://github.com/alibaba/BizCharts.git
$ cd BizCharts
$ npm install
$ npm start
$ npm run build

Test snapshot

Does not support external network testing right now.

tnpm run uitest

Usage

Try it out

import {Chart, Axis, Tooltip, Line, Point} from "bizcharts";

const data = [...];

<Chart height={400} data={data} forceFit>
  <Axis name="temperature" label={{formatter: val => `${val}°C`}} />
  <Line position="month*temperature" size={2} color={'city'} />
  <Point position="month*temperature" size={4} color={'city'} />
</Chart>

FAQ

How to Contribute

We welcome all contributions. You could submit any ideas as pull requests. Thank you for your interest and have a good time. Please let us know how can we help. Do check out issues for bug reports or suggestions first.

Update

G2 decided to terminate the "Experience Improvement Program". In version @antv/[email protected]（released at 2018.12.26）and above, all tracking code is removed, no unexpected remote request will be sent while you are using G2. And Bizcharts Upgrade the dependent version the first time at 2018.12.26 24:00.

License

BizCharts is available under the License MIT.

bizcharts's Issues

3.1.0-beta.6facet无法显示分类标题

无法显示标题，手动disable一个legend再打开，就可以正常显示

demo站点访问速度好慢😆

setTheme throw an error

https://codepen.io/anon/pen/gXEaMq?editors=1010

Not to support React 16

https://codepen.io/anon/pen/qVvWZZ

if you change react to 15.x, it's ok.

Can I use BizCharts without DataSet?

I notice most of BizCharts example with DataSet ,such as https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/bar/stacked.
How can I use BizCharts without DataSet?

build之后，页面警告

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

删除BizCharts库后就没有了。

为什么仪表盘图表无法显示指针

已经在项目中自定义了shape属性，其他显示正常，只有数值指针未渲染成功

Not compatible with React 16

I use create-react-app scaffold to build a app. Import bizcharts and run quick start demo. And an error was thrown as below. Any notes I missed?

Uncaught Error: _processChildContext is not available in React 16+. This likely means you have multiple copies of React and are attempting to nest a React 15 tree inside a React 16 tree using unstable_renderSubtreeIntoContainer, which isn't supported. Try to make sure you have only one copy of React (and ideally, switch to ReactDOM.createPortal).
    at invariant (:3000/static/js/bundle.js:70163)
    at Object.value (:3000/static/js/bundle.js:79313)
    at Object._renderSubtreeIntoContainer (:3000/static/js/bundle.js:54348)
    at Object.renderSubtreeIntoContainer [as unstable_renderSubtreeIntoContainer] (:3000/static/js/bundle.js:54331)
    at PureChart.draw (:3000/static/js/bundle.js:56414)
    at PureChart.componentDidMount (:3000/static/js/bundle.js:56204)
    at commitLifeCycles (:3000/static/js/bundle.js:81934)
    at commitAllLifeCycles (:3000/static/js/bundle.js:83103)
    at HTMLUnknownElement.callCallback (:3000/static/js/bundle.js:73676)
    at Object.invokeGuardedCallbackDev (:3000/static/js/bundle.js:73715)
    at invokeGuardedCallback (:3000/static/js/bundle.js:73572)
    at commitRoot (:3000/static/js/bundle.js:83207)
    at performWorkOnRoot (:3000/static/js/bundle.js:84139)
    at performWork (:3000/static/js/bundle.js:84088)
    at requestWork (:3000/static/js/bundle.js:83997)
    at scheduleWorkImpl (:3000/static/js/bundle.js:83880)
    at scheduleWork (:3000/static/js/bundle.js:83842)
    at scheduleTopLevelUpdate (:3000/static/js/bundle.js:84313)
    at Object.updateContainer (:3000/static/js/bundle.js:84351)
    at :3000/static/js/bundle.js:88368
    at Object.unbatchedUpdates (:3000/static/js/bundle.js:84222)
    at renderSubtreeIntoContainer (:3000/static/js/bundle.js:88367)
    at Object.render (:3000/static/js/bundle.js:88432)
    at Object../src/index.js (:3000/static/js/bundle.js:103040)
    at __webpack_require__ (:3000/static/js/bundle.js:679)
    at fn (:3000/static/js/bundle.js:89)
    at Object.0 (:3000/static/js/bundle.js:103169)
    at __webpack_require__ (:3000/static/js/bundle.js:679)
    at ./node_modules/ansi-regex/index.js.module.exports (:3000/static/js/bundle.js:725)
    at :3000/static/js/bundle.js:728

Slider Support

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/candlestick/basic

record.

Cannot read property 'getStackAddendumByID' of undefined

BizCharts ^3.1.0-beta.1
react ^16.2.0

BizCharts.js:58909 Uncaught TypeError: Cannot read property 'getStackAddendumByID' of undefined at BizCharts.js:58909 at Object.<anonymous> (BizCharts.js:71174) at t (BizCharts.js:30) at Object.<anonymous> (BizCharts.js:71221) at t (BizCharts.js:30) at Object.<anonymous> (BizCharts.js:51366) at t (BizCharts.js:30) at Object.<anonymous> (BizCharts.js:51884) at t (BizCharts.js:30) at Object.<anonymous> (BizCharts.js:418)

柱状图线形图混用问题

如何设置四列数据中三列数据用柱状图显示, 另外一列用线形图显示

自定义tooltip

• 原本的key 为 html, 已经改为 containerTpl
• 其中的一些类名也有修改

为什么不给Chart提供一个className的接口啊？

BizCharts/src/components/Chart/index.jsx

Line 43 in a72ee66

const { data, width, height, placeholder } = this.props;

支持双坐标轴吗？

Window resize throw an error sometimes

偶现，图表渲染正常，不过会抛出错误，窗口变化导致的图表自适应重绘会找不到 dom？感觉这个地方需要做一个 dom 的空判断。

demo地图报错，自行实现也有问题，求修正

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/map/china
这是官方的Demo，有问题，渲染不出来，可以解决么

貌似有些子元素的迭代并未加上 `key`

• v3.1.0

如果自己手动加上 key 就好了，比如：<Axis key="axis-x" />

How to add title in Axis by "alias"??

I follow this deemo: https://github.com/alibaba/BizCharts/blob/master/demo/component/area/basic.js and add “alias” in cols:

this is all of my code:

import React,  { Component } from 'react';
import { Chart, Geom, Axis, Tooltip, Coord, Label, Legend, Shape } from 'bizcharts';
import DataSet from '@antv/data-set';

const ds = new DataSet();
export default class Series extends Component {
	constructor(){
		super();
		this.state={
			data: [],
			cols: {},
		}
	}
	componentWillMount(){
		this.setState({
			data: [
				{ month: 'Jan', Tokyo: 7.0, London: 3.9 },
				{ month: 'Feb', Tokyo: 6.9, London: 4.2 },
				{ month: 'Mar', Tokyo: 9.5, London: 5.7 },
				{ month: 'Apr', Tokyo: 14.5, London: 8.5 },
				{ month: 'May', Tokyo: 18.4, London: 11.9 },
				{ month: 'Jun', Tokyo: 21.5, London: 15.2 },
				{ month: 'Jul', Tokyo: 25.2, London: 17.0 },
				{ month: 'Aug', Tokyo: 26.5, London: 16.6 },
				{ month: 'Sep', Tokyo: 23.3, London: 14.2 },
				{ month: 'Oct', Tokyo: 18.3, London: 10.3 },
				{ month: 'Nov', Tokyo: 13.9, London: 6.6 },
				{ month: 'Dec', Tokyo: 9.6, London: 4.8 }
			],
			cols: {
				temperature:{ alias: '销售量' },
				month: {
					alias: '横坐标',
					range:[0,1]
				}
			},
		})
	}

        render() {
		const dv = ds.createView().source(this.state.data);
		dv.transform({
			type: 'fold',
			fields: [ 'Tokyo', 'London', 'baseLine' ], // 展开字段集
			key: 'city', // key字段
			value: 'temperature', // value字段
			alias: '纵坐标',
		});
		// forceFit设置图表的宽度是否自适应
                return (
				<Chart height={400} data={dv} scale={this.state.cols} forceFit>
					<Axis name="month"/>
					<Axis name="temperature" label={{formatter: val => `${val}°C`}}/>
					<Tooltip crosshairs={{type : "y"}}/>
					<Legend/>
					<Geom type="line" position="month*temperature" size={2} color={'city'} />
				</Chart>
    );
  }

But, it's no use:

需求

将鼠标悬停在图标上时Tooltip只显示一条信息，再次点击时Tooltip显示全部信息，这个需求该怎么实现

onTooltipChange

事件写在Chart 和 Tooltip 组件上都没有触发回调，是什么原因。

在React16下使用报错

return ( <ContainerQuery query={RESPONSIVE_QUERY}> { (params) => ( <div className={classnames(['iqc-flow-stats-wrapper', params])}> <Header title="流量统计" filters={this.filters} /> <Card> <div className="flow-content"> <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> </div> <div className="statistic-text"> <p>会话总数：<span>7534</span></p> <p>累计中心：<span>13</span></p> <p>累计人数：<span>1321</span></p> </div> </Card> </div> ) } </ContainerQuery> );

修改legend的position 当前修改并不起作用 只会修改成上一次修改的position

官网demo **地图省市下钻有问题，希望指导

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/map/drill-down

Chart init failed

https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/map/drill-down

区间柱形图demo扩展

区间柱形图demo一个分类有多个区间时，如何给不同区间设置不同的颜色呢？

示例里的地图组件打不开

示例里的地图组件为什么打不开，浏览器里的console显示也报错 “ TypeError: Cannot read property 'Chart' of undefined”

When to support english docment?

Can you guys supply documents in english?

求typescript支持

自定义legend

自定义的legend是否可以让它左对齐，而不是居中显示；
生成的代码中的样式无法覆盖修改；
下面是自定义legend生成的最外层div的style

document is not defined by next.js

The error happens when the bizCharts run in nextjs where will render from server:

『关于slider部分的功能正在火速开发中』这块进度如何

https://pro.ant.design/index-cn

的图表打算升级成 BizCharts，其中使用到了这个 slider。

如何优化打包大小

打包完会有700+kb 如果又使用了data-set 将会超过1M，有什么办法优化吗？

希望增加在图表没有数据的时候依然显示坐标轴的选项

我不想要暂无数据这四个空空的大字，如果当前图表没有数据，第一眼看到的人都不知道这里曾经有个图表。
希望需求能被采纳。
祝越办越好。

IE上无法正常显示--IE 不支持“find”方法

IE 不支持“find”方法

viser用的有点难受，强烈希望这个也能支持到vue

tag releases on github

Thanks so much for all of your work on this very impressive project. Would it be possible to start tagging releases on Github?

https://github.com/alibaba/BizCharts/releases
https://git-scm.com/book/en/v2/Git-Basics-Tagging

Chart forceFit为true的状态下，父组件css样式加载完后，Chart不能自适应父类组件宽度。

.ant-col-18 {
display: block;
width: 75%

...

怎么实现动态数据显示，如 实时下载速率

legend的position

改自下载的demo
pie->index.js

export default class PieChart extends Component {
  onclick(){
    this.setState({position:'left'});
  };
  state ={
    position:'top'
  };
  render() {
    return (
      <div className='pie-charts'>
        <div className='pie-chart'>
          {/* <Rose /> */}
          <DonutRose onclick={this.onclick.bind(this)} position={this.state.position}/>
          {/* <Sunburst /> */}
          {/* <TrPie /> */}
        </div>
      </div>
    );
  }
}

pie->DonutRose

export default class PieC extends Component {
  propTypes: {
    onclick: React.PropTypes.func,
    position: React.PropTypes.string,
  };
state ={
    position:this.props.position
  };
  componentWillReceiveProps(nextProps) {
    this.setState({position:nextProps.position});
  };
  onclick(){
    this.props.onclick();
  };
  render() {
    return (
      <Chart height={window.innerHeight} data={dv} scale={cols} forceFit onClick={this.onclick.bind(this)}>
        <Coord type='polar' innerRadius={0.2} />
        <Tooltip />
        <Legend 
          position= {this.state.position}/>
        <Geom
          type="interval"
          color="year"
          position="year*percent"
          style={{lineWidth: 1,stroke: '#fff'}}
          >
        </Geom>
      </Chart>
    );
  }

点击触发 F12能看到props已经变成left但界面没有变化,在F12里面手动修改props一次,会变成left,再修改会变成之前修改的position的值

Chart padding property can not trigger render

props change can not re render.

demo: https://codepen.io/anon/pen/gXEpNB?editors=1010

多VIew图表时 图例不会自动换行

Chart内嵌套多个View时, legend自动换行功能失效

<Geom />组件的position属性不支持多属性

能否提供类似color属性多个字段合成属性值的回调函数

日期格式为什么会自动解析

多条折现图 如何设置tooltip 别名

例子中
https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/line/series
不改变数据源情况下 Tooltip name 如何把Tokyo 和 London 改成 东京 和伦敦 ，
是否有设置别名的方法？

Cannot read property 'get' of undefined

TooltipController._getDefaultTooltipCfg
什么会导致使用中出现这种错误，我这的操作是，生成一个分面图，然后更改当前分面图的分面类型，就会触发这个错误。

<Chart
        height={this.props.height - 30}
        data={this.props.tableData.get('result').toJS()}
        forceFit
        // onPointClick={this._onClick}
      >
        <Tooltip showTitle={false} />
        <Legend
          position={legendConfig.position}
          offsetY={legendConfig.offsetY}
          offsetX={legendConfig.offsetX}
        />
        <Facet
          type={(facetConfig && facetConfig.type) || 'list'}
          fields={facetField.split(',')}
          cols={(facetConfig && facetConfig.size) || 3}
          padding={(facetConfig && facetConfig.padding) || 20}
        >
          {(view, facet) => {
            const data = facet.data;
            const dv = new DataSet()
              .createView()
              .source(data)
              .transform({
                type: 'percent',
                field: valueField,
                dimension: dimension,
                as: 'percent',
              });
            return (
              // eslint-disable-next-line no-plusplus
              <View data={dv} scale={cols} key={id++}>
                <Coord type="theta" innerRadius={0.35} />
                <Geom
                  type="intervalStack"
                  position="percent"
                  color={dimension}
                  style={{ lineWidth: 1 }}
                >
                  <Label content="percent" offset={-2} />
                </Geom>
              </View>
            );
          }}
        </Facet>
      </Chart>

分面图怎么共用一个坐标系

同一行的图，都是使用的各自的坐标系，看上去不同数量的线图高度却是一样的。如何同一行的图都共用一个坐标系？

react-router 跳转后组件销毁错误

如题，options 获取为 undefined，导致 axes 属性获取报错，其它的几个组件都会有相同的问题：）

How to ignore the missing points in the line graph?

See there's a sample data like this:

const data = [
{ time: '2017-11-08', sold: 275, income: 2300 },
{ time: '2017-11-09', sold: 115, income: 667 },
{ time: '2017-11-10 13:00', sold: 120},
{ time: '2017-11-10 15:00', income: 982 },
{ time: '2017-11-11', sold: 350, income: 5271 },
{ time: '2017-11-12', sold: 150, income: 3710 }
];

I got a result like this:

===================
I tried to do some transformations on the Dataset like impute. But the methods given are inserting unsatisfying values.

All I want is to skip the missing point, and connect a straight line between two existing points.

================================
I know there is a way to fix this is to fill in the missing using the average value.
But I don't think it is a good practice as the data is actually missing. I don't want these points to be shown on the tooltips when hovered.

Do you have any suggestions?

=================
the plotting code is like below:

SalesHistogram extends React.Component {
constructor(props) {
super(props);
const dv = new View();
dv.source(props.data);

dv.transform({
  type: 'fold',
  fields: ['sold', 'income'],
  key: 'category',
  value: 'value'
});
console.log(dv);
this.data = dv;
this.cols = {
  time : {}
};

}

render() {
return (
<Chart width={800} height={600} padding={100}data={this.data} scale={this.cols}>






);
}

同样遇到了react16报错的问题

Slider 插件的包的 main 字段有大小写问题

导致引用失败：Module not found

https://github.com/alibaba/BizCharts/blob/slider/plugin/slider/package.json#L5