Vue 3 中使用 Chart.js

news2024/11/26 23:20:37

要在 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>


**

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/742579.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数字孪生系统如何整合CesiumJS?之后会产生什么效果?

数字孪生有关的项目中&#xff0c;智慧城市一直是一个比较重要的类型&#xff0c;但是这类智慧城市项目往往包含了大量的GIS相关数据&#xff0c;例如倾斜摄影、DEM、DOM、地形数据等。这时&#xff0c;将GIS系统融合进数字孪生系统的需求就出现了。 这时一个新的问题就出现了…

Qt(Day5)

写TCP服务器与客户端&#xff1a;

接口测试模块完整版

先上代码 #data_test.py from openpyxl import load_workbook class Date_test():classmethoddef Date_test_1(cls):"""配置文件读取模块:return:"""wb load_workbook("data_test.xlsx")ws wb["Sheet1"]url http://loca…

第五节 配置SpringBootAdmin电子邮件通知

本来想用一节就写完SpringBootAdmin的&#xff0c;但随着研究的深入发现一节应该是不够的&#xff0c;网上的资料也不会非常系统&#xff0c;官网的例子有些已经好几年没更新了&#xff0c;所以接下来还是系统性的来写下吧 第一节 完成基础配置&#xff0c;暴露所有端点 第二节…

智能机器人嵌入ChatGPT会给社会带来哪些进步

智能机器人技术在当今世界中扮演着越来越重要的角色&#xff0c;而其中一个令人印象深刻的例子就是ChatGPT。ChatGPT是一种基于人工智能的对话系统&#xff0c;它利用强大的自然语言处理和生成模型&#xff0c;可以与人类进行自然而流畅的对话。ChatGPT内置了智能机器人技术&am…

哈达玛矩阵乘法

哈达玛矩阵乘法 作者: 赵晓鹏时间限制: 1S章节: 递归与分治 输入说明 : 见问题描述。 输出说明 : 见问题描述。 输入范例 : 1 4 -6 输出范例 : -2 10 #include <iostream> #include <vector> using namespace std; vector<int>res; void cal(int len…

汽车EBSE测试流程分析(三):通过系统调研确定改进方案

EBSE专题连载共分为“五个”篇章。此文为该连载系列的“第三”篇章&#xff0c;在之前的“篇章&#xff08;二&#xff09;”中已经分析了EBSE步骤一&#xff1a;关于优势和挑战的案例研究。在本篇章&#xff08;三&#xff09;中&#xff0c;我们将结合具体研究实践&#xff0…

TikTok小店运营必看攻略!

众所周知&#xff0c;国内的抖音早已风生水起&#xff0c;抖音给了很多普通人一夜暴富的机会。而Tiktok也跟随着抖音开启了商业模式&#xff0c;目前流量与机会都是不可小觑的。在店铺申请通过&#xff0c;成功入驻之后&#xff0c;又该如何运营&#xff1f;这篇文章为大家解答…

小程序自定义海报

如图微信小程序生成海报自定义调整位置 //微信小程序组件 poster.wxml<view styleposition: relative;{{customStyle}};{{painterStyle}}><block wx:if"{{!use2D}}"><canvas canvas-id"photo" style"{{photoStyle}};position: absolut…

揭开液体活检技术的神秘面纱

液体活检&#xff08;liquid biopsy&#xff09;是新兴的肿瘤诊断技术&#xff0c;与传统检测手段相比具有创伤性小、取样便捷、可实时动态检测等优势&#xff0c;在肿瘤早期筛查、分子分型、复发监测和预后评估等方面起到重要作用。 图 1 与传统的组织活检相比&#xff0c;液…

路径规划算法:基于爬行动物优化的路径规划算法- 附代码

路径规划算法&#xff1a;基于爬行动物优化的路径规划算法- 附代码 文章目录 路径规划算法&#xff1a;基于爬行动物优化的路径规划算法- 附代码1.算法原理1.1 环境设定1.2 约束条件1.3 适应度函数 2.算法结果3.MATLAB代码4.参考文献 摘要&#xff1a;本文主要介绍利用智能优化…

【分布式应用】Filebeat+ELK 部署、logstash filter四大过滤插件

目录 一、 FilebeatELK 部署1.1在 Filebeat 节点上操作1.1.1安装 Filebeat1.1.2设置 filebeat 的主配置文件1.1.3 在 Logstash 组件所在节点上新建一个 Logstash 配置文件1.1.4浏览器访问测试 二 、filter四大插件2.1grok 正则捕获插件2.1.1内置正则表达式调用 2.2logstash 官方…

操作系统——输入输出IO管理

文章目录 **1 I/O管理概述****1.1 I/O设备****1.2 I/O控制方式****1.2.1 程序直接控制方式****1.2.2 中断驱动方式****1.2.3 DMA方式****1.2.4 通道控制方式** **1.3 I/O软件层次结构****1.4 应用程序I/O接口** **2 设备独立性软件****2.1 高速缓冲与缓冲区****2.2 设备分配和回…

车牌识别--http协议

文章目录 libcurl车牌识别 前言 基于https协议访问网址实现车牌识别 http是超文本传输协议&#xff0c;它可以在B/S模式下解决tcp传输格式的问题&#xff0c;处于tcp之上在应用层 https是http加密版本&#xff0c;通过httpssl实现加密版http 我们车牌识别通过http协议调用翔云…

Django_admin数据管理后台

目录 一、基础操作 二、自定义后台操作数据行为 源码等资料获取方法 admin数据管理后台是django内置的一个后台管理界面&#xff0c;能查看已注册模型类的数据结构&#xff0c;以及对数据的增删改。 一、基础操作 1.1 检查项目目录下的urls.py有没有如下配置 1.2 创建djan…

使用U盘在无系统的机器上安装Ubuntu

1、在Bios中选择将USB 作为Boot Option #1 2、插入制作好的系统盘&#xff08;系统盘制作可以看上一篇博客&#xff09; 3、save & exit选择 save change and reset 4、 开始安装系统 如果出现安装窗口过大无法点击下一步&#xff0c;可以使用ALTF7拖动窗口。

java中的BIO NIO AIO

多路复用IO模型是目前使用的比较多的模型。java中的NIO常用的理解是在 网络IO中&#xff0c;那么在网络IO中为什么NIO比BIO效率更高&#xff1f;我们的web项目中是用的哪种呢&#xff1f;可以往下看。 JavaNIO实际上就是多路复用IO。在多路复用IO模型中&#xff0c;会有一个线程…

【Unity】Unity2022设置2D动画的sample

首先在主页面选择Animation 出现这样的一个框 点击红点行&#xff0c;最右侧的三个点 将Show Sample Rate勾选上即可

Fiddler工具 — Fiddler常用插件(Willow)

Fiddler已有的功能已经够我们日常工作中使用了&#xff0c;为了更好的扩展Fiddler&#xff0c;Fiddler也是支持一些插件的安装&#xff0c;也支持用户自己开发插件并安装。 Fiddler插件下载地址&#xff1a;https://www.telerik.com/fiddler/add-ons 1、Traific Difer插件 Tr…

【Java】Map(包括HashMap)

Map HashMap 和 Hashtable 的区别HashMap 和 HashSet 区别HashMap 的底层实现JDK1.8 之前JDK1.8红黑树 HashMap 的长度为什么是 2 的幂次方HashMap 多线程操作导致死循环问题HashMap 为什么线程不安全&#xff1f; ConcurrentHashMapConcurrentHashMap 和 Hashtable 的区别JDK …