동적 데이터를 기반으로 애니메이션 차트 시각화를 작성하기 위한 React 라이브러리.

React Dynamic Charts를 사용하면 멋진 애니메이션 동적 차트를 만들어 데이터를 시각화 할 수 있습니다.

동적 차트를 사용하는 가장 기본적인 예는 다음과 같습니다.

https://github.com/dsternlicht/react-dynamic-charts 

https://dsternlicht.github.io/react-dynamic-charts/

<DynamicBarChart
  data={this.state.data}
  // Timeout in ms between each iteration
  iterationTimeout={100}
/>

애니메이션이 시작되고 애니메이션이 종료 될 때 사용자 정의 콜백을 추가 할 수도 있습니다. 콘솔을 확인하여 작동하는지 확인하십시오.

<DynamicBarChart
  data={this.state.data}
  onRunStart={() => {
    console.log("Started!");
  }}
  onRunEnd={() => {
    console.log("Ended!");
  }}
/>

설치 

npm install --save react-dynamic-charts

용법 

데모를 확인하여 작동하는지 확인하십시오.

import React, { Component } from 'react';

import { LiveBarChart } from 'react-dynamic-charts';
import 'react-dynamic-charts/dist/index.css'; // Don't forget to import the styles

class App extends Component {
  state = {
    data: [
      // ...
    ]
  };

  render () {
    return (
      <LiveBarChart
        data={this.state.data}
      />
    )
  }
}

Props