Question

我正在研究c3.js与reactjs的集成，以获取通过服务器端事件发送的实时数据。这就是我到目前为止所做的：

C3js具有流API，可用于为新的传入数据呈现部分图形（http://c3js.org/samples/api_flow.html）。

但是我相信使用该API实际上会直接操作DOM，而不是使用反应的虚拟DOM概念。任何可能的解决方法的想法/建议。

我查看了现有的NPM模块，但找不到可以支持用例的模块。

实际上我想将图形从一个转换为另一个图形（通过C3 API非常好地支持）。 C3 js基于d3 js。我知道d3 js与react的绑定要好得多，但我需要的是通过C3更好的。

同样在当前代码中，我使用的是bindto: '#chart_1',，它再次直接操作DOM。我不认为这是渲染图形的最佳方式。对此的任何想法都表示赞赏。

代码：

var getDataFromStores = function() {  
  return [{
            "proxy" : "10.0.1.15:1211",
            "url" : "http://www.google.com/in/test",
            "host" : "http://www.google.com/",
            "time" : "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
            "useragent" : "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
            "responsetime" : 200,
            "pageSize" : 332 
            },{
                "proxy" : "10.0.1.15:1212",
                "url" : "http://www.google.com/in/try",
                "host" : "http://www.google.com/",
                "time" : "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
                "useragent" : "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
                "responsetime" : 100,
                "pageSize" : 200 
            },{
                "proxy" : "10.0.1.15:1213",
                "url" : "http://www.google.com/in/demo",
                "host" : "http://www.google.com/",
                "time" : "Thu Sep 03 2015 02:34:04 GMT-0700 (PDT)",
                "useragent" : "Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.95 Safari/537.36",
                "responsetime" : 333,
                "pageSize" : 500 

        }];
};


var Chart = React.createClass({  
  getInitialState: function(){
    var state = {
        data : {
            json : getDataFromStores(),
                type : 'line',
                keys : {
                        x: 'url',
                        value: ['proxy', 'url','host','time','responsetime',"pageSize","useragent"]
                    }
        },
        axis : {
            x: {
                type: 'category'
            }
        }
    };
    return state;
  },
  componentDidMount: function(){
    this._renderChart(this.state);
  },
  _renderChart: function(state){
        var lineChart = c3.generate({
        bindto: '#chart_1',
        data: state.data,
        axis: state.axis
    })
  },
  render: function() {
    this._renderChart(this.state);
    return (
      <div id="container">
        <div id="chart_1"></div>
      </div>
    );
  }
});

React.render(<Chart />, document.body);

Answer 1

我在Reactjs中使用c3的方法是将数据作为属性传递，并使用componentDidUpdate更新图表。这是一个例子。 id的东西是一个可以用this.getDOMNode（）

重构的hack

var GaugeChart = React.createClass({
  propTypes: {
    limit: React.PropTypes.number,
    balance: React.PropTypes.number
  },
  getInitialState: function() {
    return({ id: "" });
  },
  getUUID: function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
  },

  renderChart: function() {
    var id = this.state.id;
    var width = 40;
    var self = this;
    (function() {
        self.chart = c3.generate({
        bindto: "#"+self.state.id,
        data: {
          columns: [
            ['Balance', parseFloat(self.props.balance)]
          ],
          type: 'gauge',

        },
        color: {
          pattern: ['#1ca2b8', '#1ca2b8', '#1ca2b8', '#1ca2b8'],
          threshold: {
            values: [30, 60, 90, 100]
          }
        },
        gauge: {
          max: this.props.limit,
          label: {
            format: function (value, ratio) {
              return "$" + value;
            }
          },
          width: width
        },
        tooltip: {
            show: false
        },
        padding: {
          bottom: 20
        }
      });
    })();
    this.update();
  },

  update: function() {
    if (this.chart) {
      this.chart.internal.config.gauge_max = this.props.limit;
      this.chart.load({
          columns: [['Balance', this.props.balance]]
      });
    }
  },

  componentDidMount: function() {
    // hacky way (?) to ensure this always gets it's own id that lasts through the component
    this.setState({id: "gauge-chart-"+this.getUUID()}, this.renderChart);
    $(this.getDOMNode()).on( "resize", this.update );
  },

  componentDidUpdate: function(prevProps, prevState) {
    this.update();
  },

  componentDidDismount: function() {
    $(this.getDOMNode()).off( "resize", this.update );
  },

  render: function() {
    var container = <div id={this.state.id} ></div>
    return container;
  }
});

module.exports = GaugeChart;

希望这很有用，当容器的大小发生变化时，此方法也可用于调整图表大小。

为了连接到实时数据源，你可能不得不使用websockets，我推荐使用Socket.io。

C3.js与React.js集成实时数据

1 个答案: