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. Добавьте эти 2 зависимости в package.json
2. файл плагина chart.js
3. nuxt.config.js
4. Создать компонент
5. Результат

1. Добавьте эти 2 зависимости в 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/