React + chart.js에서 "움직이는"그래프 샘플

소개

여기 과 같은 실시간으로 움직이는 그래프를 만들고 싶었습니다만, React의 문서가 그다지 충실하지 않았기 때문에 여러가지 조사해 움직이는 코드를 만들었으므로 메모해 둡니다.
(그대로도 움직이지만 리팩토링하는 것이 좋다고 생각합니다.)

※blueCount, redCount, whiteCount의 값을 무언가의 타이밍으로 바꾸면 그래프도 바뀝니다.
(State를 사용하여 변수의 변화를 모니터링 할 필요가 없습니다)

demo.js

import React from 'react'
import { Bar, Chart } from 'react-chartjs-2'
import 'chartjs-plugin-streaming'

let blueCount = 5
let redCount = 5
let whiteCount = 5
let RealTimeChart = (props) => {

  function onRefresh(chart) {
    chart.config.data.datasets.map((dataset) => {
      switch (dataset.label) {
        case 'blue':
          dataset.data.push({
            x: Date.now() - 1,
            y: blueCount,
          })
          return null
        case 'white':
          dataset.data.push({
            x: Date.now(),
            y: whiteCount,
          })
          return null
        case 'red':
          dataset.data.push({
            x: Date.now() + 1,
            y: redCount,
          })
          return null
        default:
          console.log('default')
          return null
      }
    })
  }

  var color = Chart.helpers.color

  return (
    <div>
      <Bar
        height={100}
        data={{
          datasets: [
            {
              label: 'blue',
              stack: 'blue',
              backgroundColor: color('#516897')
                .alpha(1)
                .rgbString(),
              data: [],
            },
            {
              label: 'white',
              stack: 'white',
              backgroundColor: color('#B9B9B9')
                .alpha(1)
                .rgbString(),
              data: [],
            },
            {
              label: 'red',
              stack: 'red',
              backgroundColor: color('#AC3A38')
                .alpha(1)
                .rgbString(),
              data: [],
            },
          ],
        }}
        barSize={100}
        options={{
          responsive: true,
          legend: {
            display: false,
          },

          scales: {
            xAxes: [
              {
                stacked: true,
                type: 'realtime',
                realtime: {
                  duration: 15000,
                  refresh: 3000,
                  delay: 1000,
                  onRefresh: onRefresh,
                },
                gridLines: {
                  color: '#4d4d4d',
                },
                ticks: {
                  display: false,
                },
              },
            ],
            yAxes: [
              {
                stacked: true,
                gridLines: {
                  color: '#4d4d4d',
                },
                ticks: {
                  min: 0,
                  beginAtZero: true,
                  callback: function(value) {
                    if (value % 1 === 0) {
                      return value
                    }
                  },
                },
              },
            ],
          },
        }}
      />
    </div>
  )
}
export default RealTimeChart

Reference

이 문제에 관하여(React + chart.js에서 "움직이는"그래프 샘플), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/utti0331/items/21e3e8cf18a1c701fb49

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다