介绍

Chart.js是一种使用 HTML5<canvas>元素创建干净图表的强大方法。使用 Vue 的data()对象，可以存储数据并在需要时对其进行操作以更改图形。

在本文中，您将在示例 Vue 项目中使用 Chart.js 来显示有关太阳系中行星的信息。

先决条件

要完成本教程，您需要：

• Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
• 熟悉设置 Vue.js 项目和使用 Vue.js 组件可能会有所帮助。

本教程已通过 Node v15.11.0、npmv7.6.1、vuev2.6.11 和 Chart.js v2.9.4 验证。

步骤 1 — 设置项目

为了快速设置项目，本文将推荐使用@vue/cli.

注意：本文将采取使用的方式npx来避免全局安装@vue/cli；

npx @vue/cli create vue-chartjs-example  --default

导航到新创建的项目目录；

cd vue-async-computed-example

Chart.js 可以通过npm以下命令安装：

npm install chart.js@2.9.4

此时，您将拥有一个支持 Chart.js 的新 Vue 项目。

第 2 步 – 创建图表组件

该图表将包含两个数据集：

1. 太阳系中每颗行星的卫星数量。
2. 太阳系中每颗行星的质量。

使用这两个数据集，我们可以使用不同的图表类型来显示数据的相关性。

打开你的代码编辑器，在src目录和components子目录下，创建一个新PlanetChart.vue文件。

每个 Chart.js 图表都需要<canvas>在 HTML 标记中有一个。该id图表被用作给JavaScript绑定到它的选择器。

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

<script>
import Chart from 'chart.js'

export default {
  name: 'PlanetChart'
}
</script>

接下来，您将修改App.vue文件以使用新的PlanetChart：

<template>
  <div id="app">
    <PlanetChart/>
  </div>
</template>

<script>
import PlanetChart from './components/PlanetChart.vue'

export default {
  name: 'App',
  components: {
    PlanetChart
  }
}
</script>

保存对文件的更改。

为了将组件和配置分开，接下来您将为图表数据创建一个新文件。

第 3 步 – 创建图表数据

使用 Chart.js 创建图表类似于以下内容：

const ctx = document.getElementById('example');
const exampleChart = new Chart(ctx, {
  type: '',
  data: [],
  options: {},
});

甲<canvas>元件与沿着传递type，data和options。

您将创建一个定义这些值的新文件。打开您的代码编辑器并在src目录下创建一个新planet-data.js文件。请记住，您需要根据数据为其指定一个唯一的描述性名称。对于不同的图表，您可以在此文件中包含多个数据对象。

将以下代码行添加到planet-data.js：

export const planetChartData = {
  type: "line",
  data: {
    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
    datasets: [
      {
        label: "Number of Moons",
        data: [0, 0, 1, 2, 79, 82, 27, 14],
        backgroundColor: "rgba(54,73,93,.5)",
        borderColor: "#36495d",
        borderWidth: 3
      },
      {
        label: "Planetary Mass (relative to the Sun x 10^-6)",
        data: [0.166, 2.081, 3.003, 0.323, 954.792, 285.886, 43.662, 51.514],
        backgroundColor: "rgba(71, 183,132,.5)",
        borderColor: "#47b784",
        borderWidth: 3
      }
    ]
  },
  options: {
    responsive: true,
    lineTension: 1,
    scales: {
      yAxes: [
        {
          ticks: {
            beginAtZero: true,
            padding: 25
          }
        }
      ]
    }
  }
};

export default planetChartData;

在type将被设置为line。在data将包括两个datasets，backgroundColor，borderColor，和borderWidth。在options将包括responsive，lineTension，和scales。

注意：您可以参考chart.js之文件有关线图表的详细信息，以及其他喜欢bar，polarArea，radar，pie，和doughnut。

通过导出planetChartData，您允许const将其导入到另一个 JavaScript 文件中。更重要的是，您将数据与组件分离。此最佳实践允许您仅对相关文件应用更改，并随着时间的推移提供更好的维护。

重新访问PlanetChart组件并添加planetChartData：

<script>
import Chart from 'chart.js'
import planetChartData from '../planet-data.js'

export default {
  name: 'PlanetChart'
}
</script>

接下来，将图表数据存储在data()函数中。

<script>
import Chart from 'chart.js'
import planetChartData from '../planet-data.js'

export default {
  name: 'PlanetChart',
  data() {
    return {
      planetChartData: planetChartData
    }
  }
}
</script>

注意：您也可以使用 ES6 速记。由于数据属性和值具有相同的名称，因此您可以使用planetChartData代替planetChartData: planetChartData。

此时，应该安装 Chart.js，并将图表的数据导入到PlanetChart组件中。

您应该已经<canvas>在组件的模板中创建了一个元素。此时，是时候初始化图表并写入<canvas>.

重新访问PlanetChart组件并在mounted()生命周期方法中添加创建图表：

<script>
import Chart from 'chart.js'
import planetChartData from '../planet-data.js'

export default {
  name: 'PlanetChart',
  data() {
    return {
      planetChartData: planetChartData
    }
  },
  mounted() {
    const ctx = document.getElementById('planet-chart');
    new Chart(ctx, this.planetChartData);
  }
}
</script>

保存对文件的更改。

现在，您可以使用终端运行您的应用程序：

npm run serve

在 Web 浏览器中打开应用程序：

会有两个折线图。一张图表显示了每个行星的卫星数量。另一个图表显示了每个行星的质量。的backgroundColor，borderColor和borderWidth值已影响到图表的外观。与线上的点交互将显示labels.

第 4 步 – 显示混合图表

Chart.js 还支持混合图表。在本节中，您将把图表的配置从折线图更改为月球数据集折线图和质量数据集条形图的混合。

planet-data.js使用您的代码编辑器重新访问。修改type图表数据的属性并将其更改为bar.

export const planetChartData = {
  type: "bar",
  data: { ... },
  options: { ... }
};

export default planetChartData;

此时，两个图表都将是条形图。

但是，您希望混合显示条形图和折线图。要改变这一点，在每个dataset对象中，在type属性下添加一个label属性。对于第一个dataset目的，给它一个type具有值属性line和用于第二，给它一个type具有值属性bar：

export const planetChartData = {
  type: "bar",
  data: {
    labels: ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune"],
    datasets: [
      {
        label: "Number of Moons",
        type: "line',
        data: [0, 0, 1, 2, 79, 82, 27, 14],
        backgroundColor: "rgba(54,73,93,.5)",
        borderColor: "#36495d",
        borderWidth: 3
      },
      {
        label: "Planetary Mass (relative to the Sun x 10^-6)",
        type: "bar",
        data: [0.166, 2.081, 3.003, 0.323, 954.792, 285.886, 43.662, 51.514],
        backgroundColor: "rgba(71, 183,132,.5)",
        borderColor: "#47b784",
        borderWidth: 3
      }
    ]
  },
  options: { ... }
};

export default planetChartData;

保存对文件的更改。

现在，您可以使用终端运行您的应用程序：

npm run serve

在 Web 浏览器中打开应用程序：

每个行星的卫星数量显示为折线图。每个行星的质量显示为条形图。

结论

在本文中，您在示例 Vue 项目中使用 Chart.js 来显示有关太阳系中行星的信息。

Chart.js 可用于其他数据可视化。探索示例以获取如何将其融入您的项目的灵感。