我想使用 AnyChart库与我当前的 React、Redux 堆栈。有没有办法将 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;
如果您不需要使用来自 props 的新数据动态更新图表,这会很有效。如果是这种情况,您应该在 AnyChart 包装器组件中添加一个 ComponentWillReceiveProps
处理程序,您应该在其中将新数据从 props 传递到图表并强制重绘。
Stephen Grider 制作了一个关于第三方组件集成的非常好的视频: https://www.youtube.com/watch?v=GWVjMHDKSfU
我希望我能帮到你,至少在客户端渲染方面。
马泰奥·弗拉纳
关于javascript - HTML 版本的 AnyChart 可以与 React 一起使用吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38922515/