Question

我用反应组件创建amcharts。现在我想在从下拉列表中选择时动态更改amcharts数据集，图表dataSet是更改但在UI中不使用新数据进行渲染。我试过这个，

class ChartComponent extends Component { componentWillMount(){
    let chartProps = {

        dataSet: {

            "response": [

                {"country": "USA", "visits": 3025, "color": "#FF0F00"},
                {"country": "China", "visits": 1882, "color": "#FF6600"},
                {"country": "Japan", "visits": 1809, "color": "#FF9E01"},
                {"country": "Germany", "visits": 1322, "color": "#FCD202"},
                {"country": "India", "visits": 984, "color": "#04D215"},
                {"country": "Indiaxxx", "visits": 984, "color": "#04D215"}
            ]
        },
        chartType: "lineCustom",
        xAxisTitle: "Countries",
        xAxisField: "country",
        yAxisTitle: "# of Visits",
        yAxisProps: [{
            "fillColorsField": "color",
            "fillAlphas": 0.9,
            "lineAlpha": 0.2,
            "type": "column",
            "valueField": "visits"
        }]
    };
    this.setState({chartProps: chartProps,dataSetType:null});
} onAction1Select(key) {
    this.setState({dataSetType: key});

} render() {
    const baseClass = "col-xs-12 col-centered " + css.chartComponent;
    const menuItemsWithSelectHandlers = [
        { key: "action1", label: "Data Set #1", onSelect: this.onAction1Select },
        { key: "action2", label: "Data Set #2", onSelect: this.onAction1Select }
    ];

    const {dataSetType} = this.state;
    console.info("dataSetType",dataSetType);
    if(dataSetType=="action1"){
                this.state.chartProps.dataSet={
            "response": [
                {"country": "Germany", "visits": 1322, "color": "#FCD202"},
                {"country": "India", "visits": 984, "color": "#04D215"},
                {"country": "Indiaxxx", "visits": 984, "color": "#04D215"}
            ]
        };
    }
    return (
        <div class={baseClass}>
            <DropdownButton label="Select Data Set" menuItems={menuItemsWithSelectHandlers}></DropdownButton>
            <div class="chartPanel panel">
                <Chart {...this.state.chartProps}></Chart>
            </div>
        </div>
    );
}}

如何调用amcharts的validateData（）方法

Answer 1

很难理解代码中的内容，但如果我能正确理解您的描述，则需要

constructor(){
    super();
    this.state={
        dataProvider: [];
    }
}

在选择中，您可以使用setState更改dataProvder，这样您的图表将使用新的dataProvider重新显示chartConfig并重新渲染。

我建议您创建组件图表，它将保留图表及其设置，并使用props发送到此图表dataProvider。图表将收到新的道具，并将重新渲染..

具有多个数据集的amcharts in react compoent

1 个答案: