bizcharts中LineChart时间戳使用moment转化出现Invalid Date

news2024/11/24 14:21:22

文章目录

  • 一、前言
    • 1.1、问题
    • 1.2、解决
  • 二、`bizcharts`
  • 三、`moment.js`
  • 四、在线源码
  • 五、最后

一、前言

1.1、问题

最近在使用bizcharts绘制折线图LineChart的时候,发现X轴的时间显示成了Invalid Date。如下图所示:

发现是后端返回了时间戳字符串"1572502840091",前端在xAxis中的formatter进行moment处理。

1.2、解决

我们通过查询moment官方文档,可以看到如果是时间戳,需要传Number类型的数据。但是后端接口是字符串,所以需要对其进行转换,对时间错进行parseInt转成Number类型

修改后发现图表显示正常😸

二、bizcharts

官网地址:https://bizcharts.taobao.com/

BizCharts是阿里通用图表组件库,致力于打造企业中后台高效、专业、便捷的数据可视化解决方案,基于 G2G2Plot封装的React图表库,已经历阿里复杂业务场景长达三年的洗礼,在灵活性、易用性、丰富度上满足常规图表和高度自定义图表的业务实现

三、moment.js

官网地址:https://bizcharts.taobao.com/

JavaScript 中解析、校验、操作、显示日期和时间的JS

四、在线源码

在线调试地址:https://stackblitz.com/edit/vitejs-vite-b4e77f?file=src%2FApp.tsx

五、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

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

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

相关文章

【HCIP学习】网络类型级数据链路层协议

思维导图在上面哦~ 一、网络类型的分类(4种) 出现原因:数据链路层使用的协议及规则不同,造成了不同的网络类型 1、多点接入网络(MA)------一条网段内上出现多个设备 BMA:广播型多点接入&…

增量式/绝对值式编码器,物体检测技术,位置距离检测技术

系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 11.职业规划 文章目录 前言一、物体检测技术①、以“光”检测的方式②、以“涡电流”检测的方式③、以“接触”的检测方式④、以“超声波”的…

软考102-上午题-【信息安全】-杂题+小结

一、杂题 真题1: 真题2: 真题3: 真题4: 真题5: 真题6:

基于单片机宿舍防火防盗系统的设计

**单片机设计介绍,基于单片机宿舍防火防盗系统的设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机宿舍防火防盗系统的设计概要主要涉及单片机技术的应用,以实现对宿舍环境的防火和防盗功能的…

蓝桥杯刷题_day7_动态规划_路径问题

文章目录 DAY7下降路径最小和最小路径和地下城游戏 DAY7 下降路径最小和 【题目描述】 给你一个 n x n 的 方形 整数数组 matrix ,请你找出并返回通过 matrix 的下降路径 的 最小和 。 下降路径 可以从第一行中的任何元素开始,并从每一行中选择一个元…

第十四届蓝桥杯省赛C++ C组所有题目以及题解(C++)【编程题均通过100%测试数据】

第一题《求和》【简单模拟】 【问题描述】 求1(含)至20230408(含)中每个数的和。 【答案提交】 这是一道结果填空的题,你只需要算出结果后提交即可。本题的结果为一个整数,在提交答案时只填写这个整数&…

brew install 命令详解

1. 前言 Homebrew 是一款 Mac OS 平台非常流行的软件包管理工具 通过一条简单的指令&#xff0c;就可以软件包管理&#xff0c;比如&#xff1a;安装、升级、更新等操作&#xff0c;这也是它这么流行的主要原因 2. 安装 安装软件命令格式 # 安装软件brew install <package…

css简单动画实现

html源码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>西安工程大学</title><link …

【解决方案】智慧路灯安全用电云平台解决方案

背景介绍 电力作为一种清洁能源&#xff0c;给人们带来了舒适、便捷的电气化生活。与此同时&#xff0c;由于使用不当&#xff0c;维护不及时等原因引发的漏电触电和电气火灾事故&#xff0c;也给人们的生命和财产带来了巨大的威胁和损失。 路灯漏电的主要原因分析&#xff1a…

【基于springboot分析Quartz(v2.3.2)的启动流程】

基于springboot分析Quartz&#xff08;v2.3.2&#xff09;的启动流程 最近公司的定时任务使用了Quartz框架&#xff0c;在开发中经常出现定任务不执行了的问题&#xff0c;但是我又找不到原因所在&#xff0c;可把我愁坏了。于是我决定看看Quartz框架是怎么调度任务的。&#x…

STM32 软件I2C方式读取AS5600磁编码器获取角度例程

STM32 软件I2C方式读取AS5600磁编码器获取角度例程 &#x1f516;本例程使用正点原子例程作为工程模板创建。 &#x1f4d8; 硬件电路部分 &#x1f33f;原理图部分&#xff1a; &#x1f33f;PCB布线和电路 &#x1f4d9;驱动代码部分 int main(void) {u16 i 0;u16 ra…

手动实现一个扩散模型DDPM

扩散模型是目前大部分AIGC生图模型的基座&#xff0c;其本质是用神经网络学习从高斯噪声逐步恢复图像的过程&#xff0c;本文用python代码从零开始构建了一个简单的扩散模型。 理论部分 DDPM(Denoising Diffusion Probabilistic Models) 是一种在生成对抗网络等技术的基础上发展…

【优选算法】双指针 -- 快乐数 和 盛最多水的容器

前言&#xff1a; &#x1f3af;个人博客&#xff1a;Dream_Chaser &#x1f388;刷题专栏&#xff1a;优选算法篇 &#x1f4da;本篇内容&#xff1a;03快乐数 和 04盛最多水的容器 目录 一、快乐数&#xff08;medium&#xff09; 1. 题⽬链接&#xff1a;202. 快乐数 2. …

c++初阶篇----string的底层模拟

string类的模拟 目录 string类的模拟功能介绍各功能的实现类的构造函数&#xff0c;拷贝构造函数&#xff0c;析构函数迭代器的实现string的内部容量访问成员函数string的修改成员函数string类的相关联函数string类的输入输出友元 汇总string功能的实现汇总测试代码 功能介绍 …

鸿蒙实战开发-使用属性动画实现自定义刷新组件

介绍 本篇Codelab主要介绍组件动画animation属性设置。当组件的某些通用属性变化时&#xff0c;可以通过属性动画实现渐变效果&#xff0c;提升用户体验。效果如图所示&#xff1a; 说明&#xff1a; 本Codelab使用的display接口处于mock阶段&#xff0c;在预览器上使用会显示…

element-ui switch 组件源码分享

今日简单分享 switch 组件源码&#xff0c;主要从以下四个方面来分享&#xff1a; 1、switch 组件的页面结构 2、switch 组件的属性 3、switch 组件的事件 4、switch 组件的方法 一、switch 组件的页面结构 二、switch 组件的属性 2.1 value / v-model 属性&#xff0c;绑…

基于Hive大数据分析springboot为后端以及vue为前端的的民宿系

标题基于Hive大数据分析springboot为后端以及vue为前端的的民宿系 本文介绍了如何利用Hive进行大数据分析,并结合Spring Boot和Vue构建了一个民宿管理系统。该民民宿管理系统包含用户和管理员登陆注册的功能,发布下架酒店信息,模糊搜索,酒店详情信息展示,收藏以及对收藏的…

SpringMVC源码分析(七)--数据绑定工厂

1.数据绑定工厂的使用 数据绑定工厂能够创建数据绑定器,将数据绑定到对象中,比如说当接收到请求时,经过http协议解析后数据刚开始都是字符串,此时我们希望将这些属性进行类型转换,并为对象赋值,示例如下: 1)先创建两个实体类Student和Teacher @Getter @Setter @ToSt…

封装性练习

练习 1 &#xff1a; 创建程序&#xff1a;在其中定义两个类&#xff1a; Person 和 PersonTest 类。定义如下&#xff1a; 用 setAge() 设置人的合法年龄 (0~130) &#xff0c;用 getAge() 返回人的年龄。在 PersonTest 类中实例化 Person 类的对象 b &#xff0c;调用 set…

Java八股文(算法)

Java八股文の算法 算法 算法 逆序输出字符串 题目描述&#xff1a;输入一个字符串&#xff0c;要求逆序输出。 public static String reverseString(String s) {StringBuilder sb new StringBuilder();for (int i s.length() - 1;i > 0;i--) {sb.append(s.charAt(i));}r…