Как создавать графики в Vue с помощью Chart.js

Наиболее важную информацию можно легко просмотреть с помощью графиков, что невозможно в текстовой форме данных.

Vue.js — это гибкая среда JavaScript для создания полезных пользовательских интерфейсов. Мы воспользуемся помощью Chart.js и vue-chartjs , чтобы реализовать примеры графиков.

Итак, давайте начнем.

Установите плагины Chart.js и vue-chartjs

Запустите команду, чтобы установить плагины vue-chartjs и Chart.js.

npm install vue-chartjs@^4.0.0 chart.js@^3.8.0

Chart.js — это мощная, простая и в то же время гибкая библиотека JavaScript с открытым исходным кодом для разработчиков программного обеспечения. Это помогает создавать различные потрясающие графики с использованием холста HTML5. Это хорошо известная библиотека, и вы можете оценить ее популярность, увидев более 62,1 тыс. звезд на GitHub .

С помощью Chart.js вы можете нарисовать следующие графики:

• Линия
• Бар
• Пончик
• Пирог
• Радар
• Полярная зона
• Пузырь
• Разброс

vue-chartjs предоставляет оболочку для Chart.js в Vue. Это позволяет создавать повторно используемые компоненты диаграммы для отображения полезной информации, которую можно легко понять графически.

Создание и настройка компонентов графиков

На этом этапе мы создадим компоненты для примеров графиков.

Затем создайте указанную ниже папку src/Components :

• LineChart.vue
• BarChart.vue
• DoughnutChart.vue
• PieChart.vue
• RadarChart.vue
• PolarAreaChart.vue
• BubbleChart.vue
• ScatterChart.vue

Создание и настройка маршрутов в Vue

Сначала вам необходимо установить пакет vue router.

npm add vue-router@^3.1.6

Теперь нам нужно создать и настроить маршруты в нашем приложении Vue. Эти маршруты позволят нам отображать графики из компонента, который мы создали выше.

Откройте файл router/index.js и замените существующий код следующим кодом.

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
  const routes = [
  {
    path: '/',
    name: 'LineChart',
    component: () => import('../components/LineChart.vue')
  },
  {
    path: '/bar',
    name: 'Bar',
    component: () => import('../components/BarChart.vue')
  },
  {
    path: '/doughnut',
    name: 'Doughnut',
    component: () => import('../components/DoughnutChart.vue')
  },
  {
    path: '/pie',
    name: 'Pie',
    component: () => import('../components/PieChart.vue')
  },
  {
    path: '/radar',
    name: 'Radar',
    component: () => import('../components/RadarChart.vue')
  },
  {
    path: '/polar-area',
    name: 'PolarArea',
    component: () => import('../components/PolarAreaChart.vue')
  },
  {
    path: '/bubble',
    name: 'Bubble',
    component: () => import('../components/BubbleChart.vue')
  },
  {
    path: '/scatter',
    name: 'Scatter',
    component: () => import('../components/ScatterChart.vue')
  }
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

Теперь вам нужно импортировать и зарегистрировать маршрутизатор в файле main.js.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
Vue.config.productionTip = false;
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

Откройте src/App.vue и замените текущий код заданным кодом.

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Line</router-link> |
      <router-link to="/bar">Bar</router-link> |
      <router-link to="/doughnut">Doughnut</router-link> |
      <router-link to="/pie">Pie</router-link> |
      <router-link to="/radar">Radar</router-link> |
      <router-link to="/polar-area">Polar Area</router-link> |
      <router-link to="/bubble">Bubble</router-link> |
      <router-link to="/scatter">Scatter</router-link>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-12">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  #nav {
    padding: 30px 30px 60px;
    a {
      font-weight: bold;
      color: #2c3e50;
      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }
</style>

Мы включили навигацию в Vue, определив router-link внутреннюю часть файла src/App.vue .

Директива <router-view /> отобразит связанное представление для конкретного компонента графика.

Пример линейного графика Vue

Теперь мы создадим линейный график, а также отобразим данные в компоненте Vue с помощью API линейной диаграммы.

Перейдите в components/LineChart.vue и поместите следующий код.

<template>
  <LineChartGenerator :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId"
    :dataset-id-key="datasetIdKey" :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>
<script>
import { Line as LineChartGenerator } from 'vue-chartjs/legacy'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  CategoryScale,
  PointElement
} from 'chart.js'
ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  LinearScale,
  CategoryScale,
  PointElement
)
export default {
  name: 'LineChart',
  components: {
    LineChartGenerator
  },
  props: {
    chartId: {
      type: String,
      default: 'line-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartData: {
        labels: ["Babol", "Cabanatuan", "Daegu", "Jerusalem", "Fairfield", "New York", "Gangtok", "Buenos Aires", "Hafar Al-Batin", "Idlib"],
        datasets: [
          {
            label: 'Line Chart',
            data: [600, 1150, 342, 6050, 2522, 3241, 1259, 157, 1545, 9841],
            fill: false,
            borderColor: '#2554FF',
            backgroundColor: '#2554FF',
            borderWidth: 1
          }
        ]
      },
      chartOptions: {
        legend: {
          display: true
        },
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Пример гистограммы в Vue

Чтобы создать гистограмму, откройте файл components/BarChart.vue и поместите следующий код.

<template>
  <Bar :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>
<script>
import { Bar } from 'vue-chartjs/legacy'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  BarElement,
  CategoryScale,
  LinearScale
} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)
export default {
  name: 'BarChart',
  components: {
    Bar
  },
  props: {
    chartId: {
      type: String,
      default: 'bar-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartData: {
        labels: ["2015-01", "2015-02", "2015-03", "2015-04", "2015-05", "2015-06", "2015-07", "2015-08", "2015-09",
          "2015-10", "2015-11", "2015-12"
        ],
        datasets: [{
          label: 'Bar Chart',
          borderWidth: 1,
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)',
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)',
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          pointBorderColor: '#2554FF',
          data: [12, 19, 3, 5, 2, 3, 20, 3, 5, 6, 2, 1]
        }]
      },
      legend: {
        display: true
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Пример кольцевой диаграммы Vue

Чтобы создать кольцевую диаграмму, откройте файл components/DoughnutChart.vue и добавьте следующий код.

<template>
  <Doughnut :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>
<script>
import { Doughnut } from 'vue-chartjs/legacy'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement,
  CategoryScale
} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
export default {
  name: 'DoughnutChart',
  components: {
    Doughnut
  },
  props: {
    chartId: {
      type: String,
      default: 'doughnut-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      chartData: {
        labels: ["Babol", "Cabanatuan", "Daegu", "Jerusalem"],
        datasets: [{
          borderWidth: 1,
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)'
          ],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
          ],
          data: [1000, 500, 1500, 1000]
        }]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Пример круговой диаграммы в Vue

Чтобы создать круговую диаграмму, откройте файл components/PieChart.vue и добавьте следующий код.

<template>
  <Pie :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>
<script>
import { Pie } from 'vue-chartjs/legacy'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement,
  CategoryScale
} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale)
export default {
  name: 'PieChart',
  components: {
    Pie
  },
  props: {
    chartId: {
      type: String,
      default: 'pie-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      chartData: {
        labels: ["Italy", "India", "Japan", "USA",],
        datasets: [{
          borderWidth: 1,
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)'
          ],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
          ],
          data: [1000, 500, 1500, 1000]
        }]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Пример радиолокационной диаграммы

Чтобы создать радарную диаграмму, откройте файл components/RadarChart.vue и добавьте следующий код.

<template>
  <Radar :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>
<script>
import { Radar } from 'vue-chartjs/legacy'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  PointElement,
  LineElement,
  RadialLinearScale
} from 'chart.js'
ChartJS.register(
  Title,
  Tooltip,
  Legend,
  PointElement,
  RadialLinearScale,
  LineElement
)
export default {
  name: 'RadarChart',
  components: {
    Radar
  },
  props: {
    chartId: {
      type: String,
      default: 'radar-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartData: {
        labels: [
          "Babol",
          "Cabanatuan",
          "Daegu",
          "Jerusalem",
          "Fairfield",
          "New York",
          "Gangtok",
          "Buenos Aires",
          "Hafar Al-Batin",
          "Idlib"
        ],
        datasets: [
          {
            label: 'Radar Chart',
            borderWidth: 1,
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            data: [
              32127289,
              24724027,
              25820412,
              23685667,
              25644258,
              22433220,
              22966210,
              22743184,
              21880515,
              21543111
            ]
          }
        ]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Пример диаграммы полярной области

Чтобы создать диаграмму полярной области, откройте файл components/PolarAreaChart.vue и добавьте следующий код.

<template>
  <PolarArea :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>
<script>
import { PolarArea } from 'vue-chartjs/legacy'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  ArcElement,
  RadialLinearScale
} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, ArcElement, RadialLinearScale)
export default {
  name: 'PolarAreaChart',
  components: {
    PolarArea
  },
  props: {
    chartId: {
      type: String,
      default: 'polar-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartData: {
        labels: ['Pink', 'Blue', 'Yellow', 'Green', 'Purple'],
        datasets: [
          {
            label: 'Polar Area Chart',
            borderWidth: 1,
            backgroundColor: [
              'rgba(255, 99, 132, 0.2)',
              'rgba(54, 162, 235, 0.2)',
              'rgba(255, 206, 86, 0.2)',
              'rgba(75, 192, 192, 0.2)',
              'rgba(153, 102, 255, 0.2)',
            ],
            data: [8, 14, 12, 7, 20]
          }
        ]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Пример пузырьковой диаграммы

На этом этапе мы создадим диаграмму с пузырьковой областью, поэтому откройте файл components/BubbleChart.vue и добавьте приведенный ниже код.

<template>
  <Bubble :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>
<script>
import { Bubble } from 'vue-chartjs/legacy'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  PointElement,
  LinearScale
} from 'chart.js'
ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale)
export default {
  name: 'BubbleChart',
  components: {
    Bubble
  },
  props: {
    chartId: {
      type: String,
      default: 'bubble-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartData: {
        datasets: [{
          label: 'Population Data',
          borderWidth: 1,
          borderColor: '#2554FF',
          backgroundColor: '#2554FF',
          data: [{
            x: 6,
            y: 3,
            r: 15
          }, {
            x: 3,
            y: 12,
            r: 4
          },
          {
            x: 5,
            y: 15,
            r: 10
          },
          {
            x: 3,
            y: 12,
            r: 8
          },
          {
            x: 4,
            y: 5,
            r: 20
          },
          {
            x: 2,
            y: 6,
            r: 3
          },
          {
            x: 4,
            y: 9,
            r: 11
          },
          {
            x: 5,
            y: 10,
            r: 6
          }
          ]
        }]
      },
      chartOptions: {
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Пример точечной диаграммы

На этом этапе мы создадим диаграмму с пузырьковой областью, поэтому откройте файл components/ScatterChart.vue и добавьте приведенный ниже код.

<template>
  <Scatter :chart-options="chartOptions" :chart-data="chartData" :chart-id="chartId" :dataset-id-key="datasetIdKey"
    :plugins="plugins" :css-classes="cssClasses" :styles="styles" :width="width" :height="height" />
</template>
<script>
import { Scatter } from 'vue-chartjs/legacy'
import {
  Chart as ChartJS,
  Title,
  Tooltip,
  Legend,
  LineElement,
  CategoryScale,
  PointElement,
  LinearScale
} from 'chart.js'
ChartJS.register(
  Title,
  Tooltip,
  Legend,
  LineElement,
  CategoryScale,
  PointElement,
  LinearScale
)
export default {
  name: 'ScatterChart',
  components: {
    Scatter
  },
  props: {
    chartId: {
      type: String,
      default: 'scatter-chart'
    },
    datasetIdKey: {
      type: String,
      default: 'label'
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 400
    },
    cssClasses: {
      default: '',
      type: String
    },
    styles: {
      type: Object,
      default: () => { }
    },
    plugins: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      chartData: {
        datasets: [{
          label: 'Population Data',
          borderWidth: 1,
          borderColor: '#2554FF',
          backgroundColor: '#2554FF',
          data: [{
            x: 6,
            y: 3,
            r: 15
          }, {
            x: 3,
            y: 12,
            r: 4
          },
          {
            x: 5,
            y: 15,
            r: 10
          },
          {
            x: 3,
            y: 12,
            r: 8
          },
          {
            x: 4,
            y: 5,
            r: 20
          },
          {
            x: 2,
            y: 6,
            r: 3
          },
          {
            x: 4,
            y: 9,
            r: 11
          },
          {
            x: 5,
            y: 10,
            r: 6
          }
          ]
        }]
      },
      chartOptions: {
        legend: {
          display: true
        },
        responsive: true,
        maintainAspectRatio: false
      }
    }
  }
}
</script>

Вывод

Наконец, мы завершили руководство по диаграммам и графикам Vue. В этом уроке мы научились создавать различные диаграммы и графики и отображать данные в удобной форме. Мы также познакомились с оболочками Vue для Chart js.