ReactでAnyChartのHTML版を使用できますか？

Question

現在のReact、ReduxスタックでAnyChartライブラリを使用したいと思います。 AnyChartsをFauxDomのようにラップする方法はありますか？それを行うライブラリにサンプルのコードスニペットや指示を私に与えることができればうれしいです。

Answer 1

クライアントサイドのリアクションレンダリングでは、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ハンドラーを追加する必要があります。ここでは、新しいデータをそのプロップからチャートに渡し、再描画を強制する必要があります。 https://www.youtube.com/watch?v=GWVjMHDKSfU

私は、少なくとも、クライアント側のレンダリングのために、私はあなたを助け願っています：

スティーブングライダーは、サードパーティのコンポーネントとの統合に非常に良いビデオを作りました。

Matteo Frana