Chart JS в Nuxt JS

Посмотрите, как я использую Chart JS в Nuxt JS с помощью vue-chartjs 3.5.1. Кстати, я использую Nuxt 2 с Vue 2 в нем, и я использую Tailwind CSS в моем проекте. Убедитесь, что документация по Chart JS, которую вы открываете, версии 2.9.4, потому что в этом руководстве рассказывается о версии 2.9.4.

Содержание

1. Добавьте эти две зависимости в наш package.json
2. Файл плагина chart.js
3. nuxt.config.js
4. Создайте компонент
5. Результат

1. Добавьте эти две зависимости в наш package.json

{
  ...
  "dependencies": {
    "chart.js": "2.9.4",
    "vue-chartjs": "^3.5.1"
  }
  ...
}

Войдите в полноэкранный режим Выйдите из полноэкранного режима

Запустите yarn install или npm install

2. Файл плагина chart.js

Создайте новый файл в папке plugins нашего проекта Nuxt, если папка plugins еще не существует, просто создайте ее. Этому новому файлу можно дать любое имя, но мы назовем его chart.js.

Содержимое файла chart.js:

import Vue from 'vue'
import { Bar } from 'vue-chartjs'

Vue.component('BarChart', {
  extends: Bar,
  props: {
    data: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      required: false,
      default: () => ({
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false,
        },
      }),
    },
  },
  watch: {
    data() {
      this.renderChart(this.data, this.options)
    },
  },
  mounted() {
    this.renderChart(this.data, this.options)
  },
})

Вход в полноэкранный режим Выход из полноэкранного режима

3. nuxt.config.js

export default {
  ...
  plugins: ['@/plugins/chart.js'],
  ...
}

Вход в полноэкранный режим Выйти из полноэкранного режима

Добавьте плагин chart.js в файл nuxt.config.js в свойство plugins.

4. Создайте компонент

<template>
  <div class="p-2 border border-gray-500 mt-4">
    <label class="block mb-2 font-bold"> Coba Chart </label>

    <client-only>
      <BarChart :data="chartData" />
    </client-only>
  </div>
</template>

<script>
export default {
  props: {
    penilaian: {
      type: Object,
      required: true,
    },
  },
  computed: {
    chartData() {
      return {
        labels: [1, 2, 3, 4, 5],
        datasets: [
          {
            label: '',
            data: [2, 1, 16, 3, 2],
            backgroundColor: 'rgba(20, 255, 0, 0.3)',
            borderColor: 'rgba(100, 255, 0, 1)',
            borderWidth: 2,
          },
        ],
      }
    },
  },
}
</script>

Войти в полноэкранный режим Выйти из полноэкранного режима

Попробуйте этот пример компонента.

5. Результат

Более или менее это выглядит так. Этот график называется BarChart, в Chart JS есть и другие типы графиков. Чтобы узнать больше и изучить конфигурацию, вы можете ознакомиться с документацией:

https://www.chartjs.org/docs/2.9.4/