Skip to content

设置chart属性forceFit为true,动态改变父级div宽度,则需要F12才会正常,代码如下 #498

@bibiehy

Description

@bibiehy

"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

plainnany commented on Sep 2, 2018

@plainnany
weepy3641

weepy3641 commented on Sep 3, 2018

@weepy3641
Member

@bibiehy
图表尽在监听到了 resize 事件后,才会去做宽度自适应布局。
你直接修改父节点的 width,但没有出发 resize 事件,图表组件感应不到。
建议改完父节点宽度后,主动出发下 resize 事件。 window.dispatch(resize)

bibiehy

bibiehy commented on Sep 3, 2018

@bibiehy
Author

@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

bibiehy commented on Sep 3, 2018

@bibiehy
Author

@plainnany 你试试这样写,canvas 元素不丰富是可以的,我试过
componentDidUpdate() {
console.log('Update');
const evt = document.createEvent('HTMLEvents');
evt.initEvent('resize', false, false);
window.dispatchEvent(evt);
}

ddid1103

ddid1103 commented on Sep 11, 2019

@ddid1103
binglo

binglo commented on Jul 3, 2020

@binglo

请教一下,我用bizcharts绘制折线图的时候,没有显示出来,但是改变了浏览器宽度之后,就显示出来了,请问这该怎么解

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @weepy3641@binglo@plainnany@bibiehy@ddid1103

        Issue actions

          设置chart属性forceFit为true,动态改变父级div宽度,则需要F12才会正常,代码如下 · Issue #498 · alibaba/BizCharts