vue-chartjs에서 자동 색상 할당

우선 vue-chartjs에 대한 간단한 기사는 여기

이게 뭐야?

Qiita의 마이 페이지의 그래프 같은 것을 만들고 싶어서 vue-chartjs로 자동 색 할당의 방법을 찾고 있으면 google-palette에 도착했기 때문에 망비록

google-palette

설치

프로젝트 아래에서 실행

$ npm i google-palette

사용법

그래프 본체

Chart.vue

<script>
import { Doughnut } from 'vue-chartjs'
import * as palette from 'google-palette'

export default {
  extends: Doughnut,
  data() {
    return {
      languages: ['Vue.js', 'C', 'C++', 'Python'],
      chartStatus: [40, 30, 20, 10]
    }
  },
  mounted: function() {
    this.renderChart(
      {
        labels: this.languages,
        datasets: [
          {
            backgroundColor: palette('mpn65', this.chartStatus.length).map(
              function(hex) {
                return '#' + hex
              }
            ),
            data: this.chartStatus
          }
        ]
      },
      { responsive: true, maintainAspectRatio: false }
    )
  }
}
</script>

페이지

index.vue

<template>
  <div>
    <chart-graph />
  </div>
</template>

<script>
import Vue from 'vue'
import Chart from '~/components/Chart'

export default {
  components: {
    Chart
  }
}

Vue.component('chart-graph', Chart)
</script>

브라우저

나왔다.