react-chartjs를 사용하여 누적 그래프 그리기

배경

react-chartjs는 Chart.js를 사용한 React 구성 요소

react-chartjs가 지원하는 Chart.js의 최신 버전은 v1.1.1

Chart.js가 v2에서

누적 된 막대 그래프를 지원합니다.

react-chartjs에서 Chart.js v2를 사용할 수 없으면 누적 막대 그래프를 작성할 수 없습니다.

작전

reacth-chartjs는 chartjs-v2 브랜치에서 Chart.js v2 지원 버전을 개발 중입니다.
이것을 사용하여 누적 막대 그래프를 표시합니다.

목표

Chart.js 샘플 있습니다.

이와 동일한 그래프를 표시합니다.

수단

index.jsx

const React = require('react')
const ReactDOM = require('react-dom')
const {Bar} = require("react-chartjs")

const chartData = {
  labels: [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July"
  ],
  datasets: [
    {
      label: 'Dataset 1',
      backgroundColor: "rgba(220,220,220,0.5)",
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ]
    }, {
      label: 'Dataset 2',
      backgroundColor: "rgba(151,187,205,0.5)",
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ]
    }, {
      label: 'Dataset 3',
      backgroundColor: "rgba(151,187,205,0.5)",
      data: [
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor(),
        randomScalingFactor()
      ]
    }
  ]
}

const chartOption = {
  title: {
    display: true,
    text: "Chart.js Bar Chart - Stacked"
  },
  tooltips: {
    mode: 'label'
  },
  responsive: true,
  scales: {
    xAxes: [
      {
        stacked: true
      }
    ],
    yAxes: [
      {
        stacked: true
      }
    ]
  }
}

const App = () => <Bar data={chartData} options={chartOption} width="600" height="250" onClick={this.handleClick} ref={(ref) => this.Bar = ref}/>

ReactDOM.render(
  <App/>, document.querySelector('#container'))

function randomScalingFactor() {
  return (Math.random() > 0.5
    ? 1.0
    : -1.0) * Math.round(Math.random() * 100)
}

function randomColorFactor() {
  return Math.round(Math.random() * 255)
}

index.html

<!DOCTYPE html>
<html>
  <body>
    <div id="container">
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

빌드

babel 설정 파일을 만듭니다.

.babelrc

{
  "plugins": ["transform-react-jsx"]
}

browserify로 빌드합니다.

npm init -y
npm i -D browserify babelify babel-plugin-transform-react-jsx react react-dom chart.js
npm i -D react-chartjs@git://github.com/jhudson8/react-chartjs.git#chartjs-v2
node_modules/browserify/bin/cmd.js -t babelify index.jsx -o bundle.js

react-chartjs를 설치할 때 git 브랜치를 지정합니다.

결과

index.html을 열면 다음 그래프가 표시됩니다.

참고

Stacked bar chart · Issue #10 · chartjs/Chart.js

react-chartjs 사용 - Qiita

Reference

이 문제에 관하여(react-chartjs를 사용하여 누적 그래프 그리기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ledsun/items/05d6d2725864488029bb

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

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

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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