HTML 版本的 AnyChart 可以和 React 一起使用吗？

Question

我想使用 AnyChart library with my current React, Redux stack. Is there a way to wrap AnyCharts in something like FauxDom。如果您能向我提供示例代码片段或有关执行此操作的库的说明，那就太好了。

Answer 1

至于客户端React渲染，用React组件包裹的AnyChart肯定是可以的。

您可以编写一个包装 AnyChart 组件，以这种方式接受数据数组和标题作为道具（饼图包装器示例）：

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

希望我对你有所帮助，至少在 client-side 渲染方面。

马泰奥·弗拉纳

HTML 版本的 AnyChart 可以和 React 一起使用吗？

Can AnyChart the HTML version be used with React?

javascript

d3.js

reactjs

anychart

redux