4

現在の React、Redux スタックでAnyChartライブラリを使用したいと考えています。AnyCharts をFauxDomのようなものでラップする方法はありますか? サンプルコードのスニペットまたはそれを行うライブラリへの指示を提供していただければ幸いです。

4

1 に答える 1

9

クライアント側の React レンダリングに関しては、React コンポーネントにラップされた AnyChart を使用することは確かに可能です。

次のように、データ配列とタイトルを props として受け入れるラッピング 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;

これは、小道具からの新しいデータでチャートを動的に更新する必要がない場合にうまく機能します。その場合はComponentWillReceiveProps、AnyChart ラッパー コンポーネントにハンドラーを追加する必要があります。ここで、新しいデータを props からチャートに渡し、再描画を強制する必要があります。

Stephen Grider は、サードパーティ コンポーネントの統合に関する非常に優れたビデオを作成しました: https://www.youtube.com/watch?v=GWVjMHDKSfU

少なくともクライアント側のレンダリングについては、お役に立てば幸いです。

マッテオ・フラナ

于 2016-08-15T17:52:00.750 に答える