-
Notifications
You must be signed in to change notification settings - Fork 667
Closed
Description
"bizcharts": "^3.2.1-beta.2",
"@antv/data-set": "^0.9.0",
"react": "^16.3.2",
"webpack": "^4.8.3",
1、新建文件,直接把下面代码帖进去,就可以运行
2、直接在输入框中输入80,代表80%,默认是50%,2s后执行,父级div变了,但canvas大小没变,此时按F12就正常了
3、由于项目需求,需要支持百分比改变父级div宽度,顾设置chart的属性forceFit为true
遇到过这个问题的,帮忙说下解决方法,谢谢了。
import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend } from 'bizcharts';
import { DataSet } from '@antv/data-set';
class ChartSpline extends React.Component {
render() {
const dataSource = [
{ id: 1, uv: 4000, pv: 2400, amt: 1400, date: '2018-08-01' },
{ id: 2, uv: 3000, pv: 1398, amt: 210, date: '2018-08-02' },
{ id: 3, uv: 2000, pv: 9800, amt: 6290, date: '2018-08-03' },
{ id: 4, uv: 2780, pv: 3908, amt: 2000, date: '2018-08-04' },
{ id: 5, uv: 1890, pv: 4800, amt: 6181, date: '2018-08-05' },
{ id: 6, uv: 2390, pv: 3800, amt: 7500, date: '2018-08-06' },
{ id: 7, uv: 3490, pv: 4300, amt: 2900, date: '2018-08-07' },
{ id: 8, uv: 2000, pv: 9800, amt: 5290, date: '2018-08-08' },
{ id: 9, uv: 2780, pv: 3908, amt: 1000, date: '2018-08-09' },
{ id: 10, uv: 1890, pv: 4800, amt: 9181, date: '2018-08-10' },
{ id: 11, uv: 2390, pv: 3800, amt: 2500, date: '2018-08-11' },
{ id: 12, uv: 3490, pv: 4300, amt: 6100, date: '2018-08-12' },
];
const newData = new DataSet().createView().source(dataSource);
newData.transform({
type: 'fold',
fields: ['uv', 'pv', 'amt'],
key: 'itemkey',
value: 'itemval',
});
const chartOptions = {
forceFit: true,
height: 400,
data: newData,
scale: {
date: {
type: 'time',
}
}
}
return (
<Chart {...chartOptions}>
<Legend marker="circle" />
<Axis name="date" />
<Axis name="itemval" />
<Tooltip crosshairs={{type: 'y'}} />
<Geom
type="line"
position={'date*itemval'}
size={2}
color={'itemkey'}
shape={'smooth'}
/>
</Chart>
);
}
}
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
width: 50
};
}
handleChangeInput = (e) => {
let iptVal = (e.target.value <= 0 || !/^\d/.test(e.target.value + '')) ? this.state.width : e.target.value;
setTimeout(() => {
this.setState({
width: (iptVal + '').replace(/[^\d]/g, '')
});
}, 2000);
}
render() {
const { width } = this.state;
return (
<div className="chartbox" style={{ width: `${width}%` }}>
<input placeholder="输入80,(2s后执行)" onChange={this.handleChangeInput} /> :- 如果输入80,指父级div的宽为浏览器的80%
<br/><br/><br/>
<ChartSpline />
</div>
);
}
}
export default Index;
Activity
plainnany commentedon Sep 2, 2018
#451
weepy3641 commentedon Sep 3, 2018
@bibiehy
图表尽在监听到了 resize 事件后,才会去做宽度自适应布局。
你直接修改父节点的 width,但没有出发 resize 事件,图表组件感应不到。
建议改完父节点宽度后,主动出发下 resize 事件。 window.dispatch(resize)
bibiehy commentedon Sep 3, 2018
@weepy3641
父组件state改变,子组件chart => rerender,按照你提供的方法,就算我把它写在父组件 componentDidUpdate方法里面,还是计算不准确,可能是我chart上面的元素太多了吧,总感觉canvas没画完,componentDidUpdate就执行了。如下:
componentDidUpdate() {
console.log('Update');
const evt = document.createEvent('HTMLEvents');
evt.initEvent('resize', false, false);
window.dispatchEvent(evt);
}
如果我加一个定时器,行为就一致了,计算准确,请问 onGetG2Instance 这个方法是canvas画完的回调嘛
componentDidUpdate() {
console.log('Update');
setTimeout(() => {
const evt = document.createEvent('HTMLEvents');
evt.initEvent('resize', false, false);
window.dispatchEvent(evt);
}, 500);
}
bibiehy commentedon Sep 3, 2018
@plainnany 你试试这样写,canvas 元素不丰富是可以的,我试过
componentDidUpdate() {
console.log('Update');
const evt = document.createEvent('HTMLEvents');
evt.initEvent('resize', false, false);
window.dispatchEvent(evt);
}
ddid1103 commentedon Sep 11, 2019
#964
binglo commentedon Jul 3, 2020
请教一下,我用bizcharts绘制折线图的时候,没有显示出来,但是改变了浏览器宽度之后,就显示出来了,请问这该怎么解