我想在当前的React Redux堆栈中使用AnyChart库。有没有一种方法可以将AnyCharts包装为FauxDom之类的东西。如果您可以为我提供示例代码片段或指向执行此操作的库的说明,那将很好。
最佳答案
至于客户端React渲染,肯定可以使用包装在React组件中的AnyChart。
您可以通过这种方式编写一个包装的AnyChart组件来接受数据数组和标题作为 Prop (饼图包装器的示例):
import React, { Component } from 'react';
class AnyChart extends Component {
constructor(props) {
super(props);
}
// Important, otherwise the re-render
// will destroy your chart
shouldComponentUpdate() {
return false;
}
componentDidMount() {
// Get data from the props
let data = this.props.data;
let title = this.props.title;
// Let's draw the chart
anychart.onDocumentReady(function() {
let chart = anychart.pie(data);
chart.container('chart');
chart.title(title);
chart.draw();
});
}
render() {
return (
<div id="chart" style={{height: '400px'}}/>
);
}
}
export default AnyChart;
然后,您可以从另一个react组件中使用此组件。
例如,从功能组件中:
import React from 'react';
import AnyChart from './AnyChart';
const AnyChartTest = (props) => {
const data = [
['React', 5200],
['ES6', 2820],
['Redux', 2650],
['Redux Ducks', 670]
];
return (
<div>
<h1>AnyChart Test</h1>
<AnyChart data={data} title="Technology Adoption" />
</div>
);
};
export default AnyChartTest;
如果您不需要使用 Prop 中的新数据动态更新图表,则此方法效果很好。如果是这种情况,则应在AnyChart包装器组件中添加
ComponentWillReceiveProps
处理程序,在该组件中应将新数据从props传递到图表并强制重绘。Stephen Grider制作了一个很好的有关第三方组件集成的视频:
https://www.youtube.com/watch?v=GWVjMHDKSfU
希望至少对客户端渲染有所帮助。
Matteo Frana