Vue 3 中使用 Chart.js

PAX-K

已于 2023-07-10 12:12:25 修改

阅读量1.9k

点赞数 2

分类专栏：前端文章标签： vue.js 前端 chart.js 横轴日期显示日期时间

于 2023-07-10 12:11:59 首次发布

本文链接：https://blog.csdn.net/weixin_39340061/article/details/131636054

版权

前端专栏收录该内容

20 篇文章

订阅专栏

本文介绍了如何在Vue3项目中使用Chart.js库创建图表。首先，通过npm安装Chart.js和相关适配器，然后在Vue组件中导入并注册所需模块。接着展示了一个创建线图的例子，包括数据处理和配置选项，如时间轴格式和响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要在 Vue 3 中使用 Chart.js，您需要先安装和引入 Chart.js 库，并创建一个 Vue 组件来承载图表。
效果图

1. 安装库

```shell
cnpm i chart.js moment chartjs-adapter-moment
```

2. 代码示例

<template>
  <div>
    <canvas id="chartCanvas"></canvas>
  </div>
</template>

<script>
import { Chart, registerables } from 'chart.js';
import 'chartjs-adapter-moment';
import moment from 'moment';

Chart.register(...registerables);

const data = {
  labels: ['2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04'],
  datasets: [{
    label: '数据集',
    data: [10, 20, 15, 30]
  }]
};


export default {

  mounted() {
    data.labels = data.labels.map(label => moment(label, 'YYYY-MM-DD')); // 转换为时间格式
    data.labels.map(l => console.log(l.format("YYYY-MM-DD")));
    this.renderChart(); // 在组件被挂载后创建图表
  },

  data() {
    return {
    }
  },

  methods: {
    renderChart() {
      const ctx = document.getElementById('chartCanvas').getContext('2d');
      Chart.defaults.elements.point.radius = 5;
      new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
          scales: {
            x: {
              type: 'time',
              time: {
                unit: 'hour',
                displayFormats: {
                  hour: 'YYYY-MM-DD HH:mm:ss' // 时间格式
                }
              }
            },
          },
          responsive: true,
          plugins: {
            legend: {
              position: 'bottom',
            },
            title: {
              display: true,
              text: this.title
            }
          }
        },
      });
    }
  }
};
</script>

‍
**