Vue 3 中使用 Chart.js-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue 3 中使用 Chart.js。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

要在 Vue 3 中使用 Chart.js，您需要先安装和引入 Chart.js 库，并创建一个 Vue 组件来承载图表。
Vue 3 中使用 Chart.js,前端,vue.js,前端,chart.js,横轴日期,显示日期时间

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>