하고 싶은 일

간단하게 멋있는 그래프나 차트를 표시할 수 있는 Javascript 라이브러리 「Chart.js」를 사용할 때, 색을 스스로 지정하는 것이 힘들다. 또한 데이터의 개수가 가변일 때 자동적으로 좋은 느낌의 색을 할당하고 싶다.

실현 방법

Chart.js의 플러그인 "chartjs-plugin-colorschemes"를 사용하면 사전 설정된 느낌의 색 구성표를 사용할 수 있습니다.

chartjs-plugin-colorschemes
htps : // 나기 x. 기주 b. 이오/쨩 rtjs-p

약 500종류 정도의 칼라 스킴이 준비되어 있으므로 좋아하는 것을 선택해 주세요.


이번에는 React를 사용한 예로 설명하겠습니다. 또한 "Chart.js"를 그대로 사용하는 대신 React 래퍼인 "react-chartjs-2"를 사용합니다. 데이터를 props로 전달하기만 하면 구성 요소처럼 그래프와 차트를 쉽게 추가할 수 있습니다.

절차

우선 npm을 사용하여 설치합니다.

$ npm install --save chart.js react-chartjs-2 chartjs-plugin-colorschemes

추가하려는 js 파일의 시작 부분에서 모듈을 가져옵니다.

//今回はドーナッツグラフを作ります
import { Doughnut } from 'react-chartjs-2';

//一括でインポートしても...
import 'chartjs-plugin-colorschemes';
//ファイルサイズを減らしたい場合はカラースキームだけをインポートしても大丈夫です
//今回はbrewr.Paired12というカラースキームを使いたいので以下のように指定しました。
import { brewr } from 'chartjs-plugin-colorschemes/src/colorschemes/colorschemes.office';

React 파일은 다음과 같습니다.
가계부 앱을 예로 설명하면, 이번에는 API를 두드려 카테고리별 금액의 합계를 취득하고 세트하고 있습니다.

import React, { useState, useEffect } from 'react';
import { Doughnut } from 'react-chartjs-2';
import { brewer } from 'chartjs-plugin-colorschemes';
import axios from 'axios';

const DoughnutChart = (props) => {
  const [chartData, setChartData] = useState({});

  useEffect(() => {
    getChartData();
  }, []);

  const getChartData = () => {
    axios
      .get("/api/getChartData")
      .then(res => {
        const expenses = res.data;
        let labels = [];
        let data = [];
        expenses.forEach(expense => {
          labels.push(expense.category);
          data.push(expense.money);
      });

      setChartData({
          labels:labels,
          datasets: [
            {
              label: labels,
              data: data,
              //ここはfalseに設定
              fill: false,
            }
          ]
        }
      );
    });
  };

  const options = {
    plugin: {
      colorschemes: {
        scheme: 'brewr.Paired12'
      }
    }
  };

  return (
    <React.Fragment>
        <Doughnut data={chartData} options={options}/>
    </React.Fragment>
  );
};

export default DoughnutChart;

이 컴퍼넌트를 짜넣어 표시하면(자) 이런 느낌의 세련된 배색의 그래프가 표시됩니다.


만약 새로운 카테고리의 데이터가 등록되어 표시하는 데이터가 늘어났을 때도 칼라 스킴으로부터 색을 할당해 표시해 줍니다. 이번 사용하고 있는 「brewr.Paired12」의 경우는 12색까지 대응 가능합니다.

참고로 한 사이트

Chart.js | Open source HTML5 Charts for your website
chartjs-plugin-colorschemes
jerairrest/react-chartjs-2: React wrapper for Chart.js - GitHub
react-chartjs-2와 Chart.js를 사용하여 그래프를 만들려고했습니다. - Qiita