相关疑难解决方法(0)

使用React更新道具上的C3图表

我试图在数据更改时美化作为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 ( …
Run Code Online (Sandbox Code Playgroud)

reactjs c3

4
推荐指数
1
解决办法
4097
查看次数

标签 统计

c3 ×1

reactjs ×1