vue-chartjsで自動色割り当て

6520 ワード
npm chart.js Vue.js JavaScript nuxt.js JavaScript テキストリンク

まず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>

ブラウザ

出ました。