Vue を使用して包括的な統計グラフ ナビゲーションを実装する方法

npm install -g @vue/cli
vue create chart-navigation

cd chart-navigation
npm install --save vue-router chart.js

src
├── components
│   ├── BarChart.vue
│   ├── LineChart.vue
│   └── PieChart.vue
├── router
│   └── index.js
└── App.vue

import Vue from 'vue'
import VueRouter from 'vue-router'
import BarChart from '@/components/BarChart.vue'
import LineChart from '@/components/LineChart.vue'
import PieChart from '@/components/PieChart.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/bar',
    component: BarChart
  },
  {
    path: '/line',
    component: LineChart
  },
  {
    path: '/pie',
    component: PieChart
  }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

<template>
  <div>
    <h1>柱状图</h1>
    <canvas ref="chart"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js';

export default {
  mounted() {
    var ctx = this.$refs.chart.getContext('2d');
    new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['A', 'B', 'C', 'D', 'E'],
        datasets: [{
          label: '数据',
          data: [10, 20, 30, 40, 50],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#008000', '#800080']
        }]
      },
      options: {}
    });
  }
}
</script>

<template>
  <div>
    <h1>折线图</h1>
    <canvas ref="chart"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js';

export default {
  mounted() {
    var ctx = this.$refs.chart.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['A', 'B', 'C', 'D', 'E'],
        datasets: [{
          label: '数据',
          data: [10, 20, 30, 40, 50],
          borderColor: '#FF6384',
          fill: false
        }]
      },
      options: {}
    });
  }
}
</script>

<template>
  <div>
    <h1>饼状图</h1>
    <canvas ref="chart"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js';

export default {
  mounted() {
    var ctx = this.$refs.chart.getContext('2d');
    new Chart(ctx, {
      type: 'pie',
      data: {
        labels: ['A', 'B', 'C', 'D', 'E'],
        datasets: [{
          label: '数据',
          data: [10, 20, 30, 40, 50],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56', '#008000', '#800080']
        }]
      },
      options: {}
    });
  }
}
</script>

<template>
  <div>
    <h1>统计图表导航</h1>
    <nav>
      <router-link to="/bar">柱状图</router-link>
      <router-link to="/line">折线图</router-link>
      <router-link to="/pie">饼状图</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
}
</script>