使用 React 更新有关props更改的 C3 图表

IT技术 reactjs c3
2021-05-08 09:27:01

我正在尝试美化作为 React 组件编写的 C3 图表在其数据更改时的更新。数据通过其 props 从父组件流向组件。

我现在拥有的解决方案“有效”但似乎不是最佳的：当新数据进来时，整个图表会重新生成。我想转换到新状态（线条移动而不是整个图表在眨眼中更新）。C3 API 似乎有很多方法，但我找不到如何访问图表。

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;
1个回答

根据项目的文档：

通过使用 API，您可以在图表呈现后更新图表。... API 可以通过从generate().

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

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);
    },

    // ...
});

然后，你想在props更新时更新图表；React 提供了一个生命周期钩子componentWillReceiveProps，它会在 props 改变时运行。

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

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

（确保this._renderChart从您的render函数中删除。）

其它你可能感兴趣的问题
上一篇MakerFlex 线轴有气泡？ 下一篇用两种材料打印零件