React에서 차트 만들기가 더 쉬워졌습니다.

ZingChart의 개정된 React 구성 요소 덕분에 React 애플리케이션에 차트를 추가하는 것이 훨씬 쉬워졌습니다.

ZingChart 팀은 최근 zingchart-react 구성 요소를 업데이트하여 더 많은 기능을 추가하고 구성 요소에서 바로 이벤트 및 메서드에 직접 액세스하여 시각화를 생성했습니다! 어떻게 작동하는지 보여드리게 되어 기쁩니다!

ZingChart — 필요한 마지막 데이터 시각화 라이브러리

ZingChart은 원래 JavaScript 차트 작성 라이브러리 중 하나이며 해당 기능 세트를 지속적으로 혁신하고 개선하고 있습니다. 35개 이상의 다양한 차트 유형, 통합할 메서드/이벤트의 풍부한 API 및 전담 지원 팀을 통해 ZingChart는 데이터 시각화 요구에 맞는 올인원 솔루션을 제공합니다.


ZingChart에는 35개 이상의 기본 차트 유형과 수백 가지 구성이 있습니다.

1분 이내에 React.js 애플리케이션에 차트 추가

React 애플리케이션이 없는 경우 create-react-app을 사용하여 쉽게 설정할 수 있습니다.
$ npx create-react-app myApplication
먼저 NPM을 통해 React 애플리케이션에 패키지를 추가합니다.
$ npm i zingchart-react
그런 다음 차트를 렌더링하려는 프로젝트 파일에 구성 요소를 포함합니다.
import ZingChart from 'zingchart-react';
마지막으로 렌더링할 마크업에 차트를 추가합니다!

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      config: {
        type: 'bar',
        series: [{
          values: [4,5,3,4,5,3,5,4,11]
        }]
      }
    }
  }
  render() {
    return (
      <div>
        <ZingChart data={this.state.config}/>
      </div>
    );
  }
}

https://glitch.com/~react-chart

그거였다! 몇 줄의 코드만 있으면 데이터가 업데이트될 때 업데이트되는 완전한 반응형 차트가 있습니다.

한 단계 더 나아가

위의 예는 ZingChart에서 차트를 생성하는 것이 얼마나 간단한지에 대한 최소한의 예이지만 라이브러리는 더 복잡하고 대화형 시각화를 만들 수 있을 만큼 충분히 강력합니다.


https://glitch.com/~zingchart-react-example

반동

zingchart-react 구성 요소는 차트 구성에서 데이터에 이르기까지 모든 속성에 반응합니다. 구성 요소에 변경 사항이 전송되면 차트가 자동으로 다시 렌더링됩니다.



https://glitch.com/~zingchart-react-reactivity

이벤트 및 방법 - 앱을 ZingChart와 연결

수정된 ZingChart 구성 요소는 모두 React 구성 요소에 대한 연결에 관한 것입니다. 이벤트는 props를 통해 제공하는 기능에 자동으로 바인딩되며 refs를 통해 특정 구성 요소에 액세스할 때 사용 가능한 모든 ZingChart 메서드를 사용할 수 있습니다.

이벤트

함수를 알려진 ZingChart 이벤트 소품에 바인딩하면 차트에서 이벤트가 발생할 때 사용자 지정 작업을 수행할 수 있습니다. 아래 예에서는 이벤트node_mouseover가 발생하고 해당 내용이 표시됩니다.
<ZingChart ref={this.chart} data={this.state.config} node_mouseover={this.nodeInfo}/>


https://glitch.com/~zingchart-react-events

모든 ZingChart 이벤트 목록: https://www.zingchart.com/docs/api/events

행동 양식

메서드는 구성 요소에 ref가 제공될 때 호출될 수 있으며 알려진 메서드는 구성 요소의 인스턴스에서 호출됩니다. 아래는 React에서 만든 사용자 정의 버튼에서 플롯을 동적으로 추가하는 예입니다.

<ZingChart ref={this.chart} data={this.state.config}/>
...
this.chart.current.addplot({
  data: {
    values: [5,5,3,6,7,3,4,6,7],
    text: "My new plot"
  }
});

https://glitch.com/~zingchart-react-methods

모든 ZingChart 메서드 목록: https://www.zingchart.com/docs/api/methods

위의 모든 예는 글리치 컬렉션에서 찾을 수 있습니다.

https://glitch.com/@zing-soft/react

차트를 작성하세요!

ZingChart와 그 React 구성 요소에 대해 더 잘 이해했다면 이를 애플리케이션에 포함하기만 하면 됩니다. 구성 요소의 전체 문서를 보려면 Github 리포지토리로 이동하십시오. https://github.com/zingchart/zingchart-react

데이터 시각화 세계의 선구자인 ZingChart는 빅 데이터를 염두에 두고 구축된 강력한 Javascript 라이브러리입니다. 35개 이상의 차트 유형과 개발 스택과의 손쉬운 통합을 통해 ZingChart를 사용하면 대화형 및 반응형 차트를 쉽게 만들 수 있습니다.