我试图在数据更改时美化作为 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;
根据项目的文档 http://c3js.org/gettingstarted.html#api:
通过使用 API,您可以在呈现图表后更新图表。 ...可以通过返回的对象调用APIgenerate()
.
因此,您需要做的第一件事是在生成图表时保存对图表的引用。将其直接连接到组件上非常简单:
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
功能。)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)