使用React更新道具更改的C3图表 [英] Updating C3 charts on props change with React

问题描述

我试图美化当数据更改时作为React组件编写的C3图表的更新。数据通过其道具从父组件流到该组件。

I am trying to beautify the update of a C3 chart written as a React component when its data change. The data flows to the component from a parent component via its props.

我现在使用的解决方案有效，但似乎并不理想：输入新数据时，将重新生成整个图表。我想过渡到新状态（线条移动而不是整个图表在瞬间更新）。 C3 API似乎有很多方法，但是我找不到如何到达图表。

The solutions I have now "works" but do not seem optimal: when new data comes in, the whole chart is regenerated. I would like to transition to the new state (lines moving rather than whole chart updating in blink). The C3 API seem to have lots of method but I cannot find how to reach the chart.

var React = require("react");
var c3 = require("c3");

var ChartDailyRev = React.createClass({
    _renderChart: function (data) {
        var chart = c3.generate({
            bindto: '#chart1',
            data: {
              json: data,
              keys: {
                  x: 'date',
                  value: ['requests', 'revenue']
              },
              type: 'spline',
              types: { 'revenue': 'bar' },
              axes: {
                'requests': 'y',
                'revenue': 'y2'
              }
            },
            axis: {
                x: { type: 'timeseries' },
                y2: { show: true }
            }
        });
    },
    componentDidMount: function () {
        this._renderChart(this.props.data);
    },
    render: function () {
        this._renderChart(this.props.data);
        return (
            <div className="row" id="chart1"></div>
        )
    }
});

module.exports = ChartDailyRev;

推荐答案

根据< a href = http://c3js.org/gettingstarted.html#api>项目文档：

使用API​​，您可以在渲染图表后对其进行更新。 ... API可以通过 generate（）返回的对象来调用。

因此，您要做的第一件事是在生成图表时保存对图表的引用。将它直接附加到组件很容易：

So the first thing you need to do is save a reference to the chart when you generate it. It's easy enough to attach it directly to the component:

var ChartDailyRev = React.createClass({
    _renderChart: function (data) {
        // save reference to our chart to the instance
        this.chart = c3.generate({
            bindto: '#chart1',
            // ...
        });
    },

    componentDidMount: function () {
        this._renderChart(this.props.data);
    },

    // ...
});

然后，您想在道具更新时更新图表； React提供了一个名为 componentWillReceiveProps 的生命周期钩子，当道具更改时会运行。

Then, you want to update the chart when the props update; React provides a lifecycle hook called componentWillReceiveProps that runs when the props have changed.

var ChartDailyRev = React.createClass({
    // ...

    componentWillReceiveProps: function (newProps) {
        this.chart.load({
            json: newProps.data
        }); // or whatever API you need
    }
});

（请确保删除 this._renderChart 从您的渲染器函数。）

(Make sure to remove this._renderChart from your render function.)

这篇关于使用React更新道具更改的C3图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！