소개

chart.js에서 레이더 차트를 그려 데이터 세트가 동적이었을 때 좋은 느낌의 색을 자동으로 생성하는 방법.

사용할 패키지

chart.js

google-palette(palette.js)

chart.js

간단한 그래프를 그려주는 멋진 라이브러리.

google-palette

컬러 팔레트를 자동으로 생성해주는 오징어한 라이브러리.
공식 샘플
이번에는 레이더 차트이므로 mpn65를 사용하고 싶습니다.
tol은 움직였는데 mpn65는 순전히 움직이지 않았다.

추가

현재(2018/11/30) 확인한 바,
버전 1.1.0에서는 mpn65를 사용할 수있었습니다!
그래서 다음 명령으로 설치하여 문제 없습니다.

npm install google-palette

결론

mpn65는 github에서 설치하지 않으면 움직이지 않습니다.
npmjs는 오래되었습니다.

yarn add chart.js https://github.com/google/palette.js.git

import * as Chart from 'chart.js/dist/Chart';
import * as palette from 'google-palette';

// サンプルデータの準備
const sampleData = {
  labels: ['さんすう', 'こくご', 'しゃかい', 'たいいく', 'おんがく'],
  scores: [
    {
      name: 'たろう',
      points: [10, 40, 50, 90, 20]
    },
    {
      name: 'はなこ',
      points: [50, 80, 50, 40, 70]
    }
  ]
};
// 色を生成
const colors = palette('mpn65', sampleData.scores.length).map((hex) => {
  return '#' + hex;
});
// サンプルデータと生成した色からデータセットを準備
const datasets = sampleData.scores.map((score, i, a) => {
  return {
    label: score.name,
    data: score.points,
    backgroundColor: colors[i] + '11',  // 塗りは少し透明に
    borderColor: colors[i],
    pointRadius: 3,
    pointHitRadius: 6
  };
});
const type = 'radar';
const data = {
  labels: sampleData.labels,
  datasets: datasets
};
const options = {
  scale: {
    ticks: {
      stepSize: 10,
      beginAtZero: true
    }
  }
};

const ctx = document.getElementById('canvasId').getContext('2d');

const chart = new Chart(ctx, {
  type: type,
  data: data,
  options: options
});

참고

h tps : // s t c ゔ ぇ rf ぉ w. 코 m / 쿠에 s 치온 s / 39871319 / 아우토 마치 c - rs - 아시 g 멘 t - 니 - rtjs - 2 - x - 에 s t - rk-a ny 우세 d-와 rk-