是否可以将AnyChart的HTML版本与React一起使用？

Question

我想使用AnyChart库与我目前的React，Redux堆栈。有什么办法可以包装AnyCharts，如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; 

然后，可以使用该组件从另一个反应组分。 例如，从功能组件：

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; 

这种运作良好，如果你不需要有从道具的新数据动态更新图表。如果是这种情况，您应该在AnyChart包装器组件中添加一个ComponentWillReceiveProps处理程序，您应该在其中将新数据从道具传递到图表并强制重绘。

斯蒂芬Grider由第三方组件的集成非常好的视频： https://www.youtube.com/watch?v=GWVjMHDKSfU

我希望我帮助你，至少在客户端呈现。

Matteo Frana