如何在 Vue 中使用 Chart.js

Question

Chart.js 是一个很棒的库，用于可视化数据并将其显示在您的项目中。 要在你的 Vue 项目中使用它，有一个很好的包装器叫做 vue-chartjs，vue-chartjs 帮助您将 Chart.js 与 Vue 组件集成。

您可以从 npm 安装 Chart.js 和 vue-chartjs，也可以通过 CDN 在浏览器中直接使用它。 要使用 Chart.js 的图表类型 之一，您应该使用 vue-chartjs extends属性如下图。

<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
Vue.component("line-chart", {
  extends: VueChartJs.Line,
  mounted() {
    this.renderChart(
      {
        labels: [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
        ],
        datasets: [
          {
            label: "Data One",
            backgroundColor: "#f87979",
            data: [40, 39, 10, 40, 39, 80, 40],
          },
        ],
      },
      { responsive: true, maintainAspectRatio: false }
    );
  },
});

要创建图表，您必须调用 this.renderChart() 在里面 mounted() 挂钩参数为 this.renderChart() 是您提供的数据和任何选项，您可以将其作为道具传递。

注意： 您可以使用 vue-chartjs 在你的单文件组件中，但你必须省略 <template> 标记为你的 .vue 文件，这样它就不会与 模板冲突 vue-chartjs 使用