Vue.jsでC3.jsを使ってドーナツチャートを表示してみる

Vue.jsなアプリケーションでドーナツチャートを表示する必要があったので、C3.jsを試してみたよ。

ドーナツチャートを表示するコンポーネントの作成

C3.jsを使ってドーナツチャートを表示するためのコンポーネントを作ります。とりあえず、ファイル名をDonutChart.vue として作ってみます。

ドーナツチャートは、C3のExampleを参考にして作ります。

<template>
  <div id="chart"></div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import c3 from 'c3'

@Component
export default class DonutChart extends Vue {
  @Prop()
  data!: {key: string, count: number}[]

  mounted() {
    c3.generate({
      bindto: '#chart',
      data: {
        columns: this.data.map(value => [value.key, value.count]),
        type: 'donut'

      },
    })
  }
}
</script>

<style scoped>
  @import '~c3/c3.min.css';
</style>

DonutChart.vueを使う親コンポーネント

data1からdata4までの4つのデータを渡してチャートを表示するようにしています。

<template>
  <div id="app">
    <donut-chart :data="data"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import DonutChart from './components/DonutChart.vue'

@Component({
  components: {
    DonutChart,
  },
})
export default class App extends Vue {
  data = [
    {key: 'data1', count: 500},
    {key: 'data2', count: 250},
    {key: 'data3', count: 150},
    {key: 'data4', count: 100},
  ]
}
</script>