当前位置：首页 > article >正文

创建Vue2项目，引入chart.js，并生成柱形图

article 2024/11/13 18:08:23

1. 创建一个新的 Vue 2 项目

如果你还没有创建项目，可以使用 Vue CLI 来创建一个新项目。首先确保你已经安装了 Node.js 和 npm。然后安装 Vue CLI 并创建一个新项目。

npm install -g @vue/cli
vue create my-vue-chart-project

在创建过程中选择 Vue 2 版本。

2. 安装 Chart.js 库

进入项目目录，通过 npm 或 yarn 安装 Chart.js 库。

cd my-vue-chart-project
npm install chart.js@2.9.4 --save # 安装适用于 Vue 2 的 Chart.js 版本

3. 创建 Chart 组件

在 src/components 目录下创建一个新的 Vue 组件 BarChart.vue。

<template>
  <div>
    <canvas id="bar-chart"></canvas>
  </div>
</template>

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

export default {
  name: 'BarChart',
  props: {
    data: {
      type: Array,
      required: true
    },
    labels: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.createBarChart();
  },
  methods: {
    createBarChart() {
      const ctx = document.getElementById('bar-chart').getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: this.labels,
          datasets: [{
            label: 'My First dataset',
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
            borderWidth: 1,
            data: this.data
          }]
        },
        options: {
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      });
    }
  }
};
</script>

这个组件接收两个 prop：data 和 labels，分别表示柱形图的数据和标签。

4. 在父组件中使用 BarChart 组件

首先，你需要在父组件（例如 App.vue）中导入 BarChart 组件，并注册它。

<template>
  <div id="app">
    <bar-chart :data="chartData" :labels="chartLabels"></bar-chart>
  </div>
</template>

<script>
import BarChart from './components/BarChart.vue';

export default {
  name: 'App',
  components: {
    BarChart
  },
  data() {
    return {
      chartLabels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      chartData: [0, 10, 5, 2, 20, 30, 45]
    };
  }
};
</script>