我试图在数据更改时美化作为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)