alibaba / bizcharts Goto Github PK
View Code? Open in Web Editor NEWPowerful data visualization library based on G2 and React.
Home Page: http://bizcharts.net/products/bizCharts
Powerful data visualization library based on G2 and React.
Home Page: http://bizcharts.net/products/bizCharts
我不想要暂无数据这四个空空的大字,如果当前图表没有数据,第一眼看到的人都不知道这里曾经有个图表。
希望需求能被采纳。
祝越办越好。
Can you guys supply documents in english?
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> );
例子中
https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/line/series
不改变数据源情况下 Tooltip name 如何把Tokyo 和 London 改成 东京 和伦敦 ,
是否有设置别名的方法?
同一行的图,都是使用的各自的坐标系,看上去不同数量的线图高度却是一样的。如何同一行的图都共用一个坐标系?
已经在项目中自定义了shape属性,其他显示正常,只有数值指针未渲染成功
如何设置四列数据中三列数据用柱状图显示, 另外一列用线形图显示
打包完会有700+kb 如果又使用了data-set 将会超过1M,有什么办法优化吗?
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>
BizCharts/src/components/Chart/index.jsx
Line 43 in a72ee66
https://alibaba.github.io/BizCharts/demo-detail.html?code=demo/map/china
这是官方的Demo,有问题,渲染不出来,可以解决么
将鼠标悬停在图标上时Tooltip只显示一条信息,再次点击时Tooltip显示全部信息,这个需求该怎么实现
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
Chart内嵌套多个View时, legend自动换行功能失效
导致引用失败:Module not found
https://github.com/alibaba/BizCharts/blob/slider/plugin/slider/package.json#L5
IE 不支持“find”方法
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
.ant-col-18 {
display: block;
width: 75%
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库后就没有了。
改自下载的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的值
https://pro.ant.design/index-cn
的图表打算升级成 BizCharts,其中使用到了这个 slider
。
能否提供类似color属性多个字段合成属性值的回调函数
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>
);
}
区间柱形图demo一个分类有多个区间时,如何给不同区间设置不同的颜色呢?
无法显示标题,手动disable一个legend再打开,就可以正常显示
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)
props change can not re render.
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?
示例里的地图组件为什么打不开,浏览器里的console显示也报错 “ TypeError: Cannot read property 'Chart' of undefined”
===================
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?
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}>
);
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.