Question

我正在创建一个仪表板，其中包含堆积的条形图。我将react chartis.js与chartist-plugin-legend一起使用。

我发现的结果是，如果我已经定义了所有数据（如示例所示）来初始化图表，那么图例就会显示出来。

但是，在我的情况下，图表的数据与状态绑定，并且数据序列在componentDidMount（）中发生了更改，在这里我获取了所有数据并为状态设置了更新值，在这种情况下将不显示图例

我注意到chartist-plugin-legend插件仅将图例元素添加到图表的“ created”事件中。因此，这可能就是稍后更新数据后看不到图例的原因。

那么有什么方法可以强制让图例重绘？

componentDidMount() {
        this.fetchMetricsData(xxxxx)
}

在fetchMetricsData中：

fetch('xxxxxxxx', {
        method: "GET",
        headers: {
            "Authorization": "xxxx",
            "Content-Type": "application/json"
        }
    })
        .then(results => results.json())
        .then(json => {
              this.setState({data:json.data})
        });

对于渲染部分：

render() {
    const { classes } = this.props;
    const that = this;
    return (
        <GridContainer>
            <GridItem xs={12} sm={12} md={12}>
                <Card>
                    <CardHeader color="info" icon>
                        <h4 className={classes.cardIconTitle}></h4>
                    </CardHeader>
                    <CardBody>

                        <ChartistGraph
                            data={this.state.data}
                            type="Bar"
                            options={stackMetricsChart.options}
                            listener={{draw: that.onMetricDataDraw}}
                        />
                    </CardBody>
                </Card>
            </GridItem>
        </GridContainer>
    );
}

对于图表师选项：

require('chartist-plugin-legend')
const stackMetricsChart = {
options: {
    axisX: {
        showGrid: false
    },
    low: 0,
    chartPadding: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
    },
    seriesBarDistance: 22,
    stackBars: true,
    plugins: [
        Chartist.plugins.tooltip(),
        Chartist.plugins.legend({
            position: 'bottom'
           }
        )
    ]
}};

宪章数据系列更改后，如何让宪章传说重新绘制

0 个答案: