GithubHelp home page GithubHelp logo

alibaba / bizcharts Goto Github PK

View Code? Open in Web Editor NEW
6.1K 6.1K 668.0 5.5 MB

Powerful data visualization library based on G2 and React.

Home Page: http://bizcharts.net/products/bizCharts

JavaScript 2.11% TypeScript 97.88% SCSS 0.01%
chart data-visualization es6 grammar html5-canvas react

bizcharts's Introduction

BizCharts

NPM Package NPM Downloads

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

More details about BizCharts

Features

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

See more demos.

Releases

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>

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 People

Contributors

0xflotus avatar ahuigo avatar alibaba-oss avatar alromh87 avatar antimoron avatar bamboosword avatar brodanoel avatar buggmaker avatar chenshuai2144 avatar dickeylth avatar heiniuhaha avatar ironicstone avatar itestauipi avatar kagawagao avatar kiangtengl avatar leannechn avatar leslie2014 avatar leungwensen avatar liunian avatar newraina avatar ssfxz avatar thonatos avatar ty-cs avatar varharrie avatar wb-tyz279201 avatar weepy3641 avatar xiaohuoni avatar xiaran113 avatar zheeeng avatar zhubin1992 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bizcharts's Issues

Window resize throw an error sometimes

image

image

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

区间柱形图demo扩展

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

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

自定义legend

2017-12-06 2 36 43

自定义的legend是否可以让它左对齐,而不是居中显示;
生成的代码中的样式无法覆盖修改;
下面是自定义legend生成的最外层div的style
2017-12-06 2 38 18

onTooltipChange

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

如何优化打包大小

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

自定义tooltip

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

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

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

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的值

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库后就没有了。

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)

在React16下使用报错

_121
image

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> );

示例里的地图组件打不开

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

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:
plotting

===================
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}>






);
}

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:
image
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:
image

Cannot read property 'get' of undefined

image
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>

需求

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.