Как перерисовать легенду чартиста после изменения ряда данных чартиста - PullRequest
Новая
       17

Как перерисовать легенду чартиста после изменения ряда данных чартиста

0 голосов
/ 11 июля 2019

Я создаю панель мониторинга, которая содержит гистограмму с накоплением.Я использую реагирование chartis.js с chartist-plugin-legend.

Я обнаружил, что если я начну диаграмму со всеми уже определенными данными, как в качестве примера, тогда может появиться легенда.

Однако в моем случае данные диаграммы связываются с состоянием, а ряд данных изменяется в componentDidMount (), где я выбираю все данные и устанавливаю состояние с обновленным значением. Легенда не отображаетсяв этом случае.

Я заметил, что плагин chartist-plugin-legend добавлял только элемент легенды в событие графика "create".Так что это может быть причиной того, что я не могу увидеть легенду после обновления данных позже.

Так есть ли способ принудительно перерисовать легенду? 

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'
           }
        )
    ]
}};
...