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

文章目录

  • 一、前言
    • 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.mzph.cn/news/786861.shtml

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

相关文章

联发科成功在天玑 9300 芯片部署大模型;小米SU7车载“小爱大模型”语音交互技术

🦉 AI新闻 🚀 联发科成功在天玑 9300 芯片部署大模型 摘要:联发科宣布,在天玑 9300 等旗舰芯片上首次实现大模型(通义千问)的深度适配,能够在离线状态下运行多轮 AI 对话。此外,阿…

【Servlet基础】Servlet项目创建

目录 一、认识Servlet 1.1、认识Tomcat 1.2、Servlet是什么 1.3、Servlet主要工作 二、实现第一个Servlet项目 2.1、创建Maven项目 2.2、引入依赖 2.3、创建目录结构 2.4、编写servlet代码 2.5、打包 2.6、部署 2.7、验证程序 三、利用smart Tomcat插件一键完…

152 Linux C++ 通讯架构实战7 ,makefile编写改成for cpp,读配置文件,内存泄漏查找,设置标题实战

读写配置文件代码实战。nginx.conf 一个项目要启动,需要配置很多信息,第一项就是学习如何配置一个项目 nginx.conf的内容 #是注释行, #每个有效配置项用 等号 处理,等号前不超过40个字符,等号后不超过400个字符&#…

练习 13 Web [极客大挑战 2019]Secret File

php伪协议请求&#xff0c;php代码审计 参考&#xff1a;BUUCTF__[极客大挑战 2019]Secret File_题解 没有任何上传和登录页面 查看前端源码 发现 <a id"master" href"./Archive_room.php" style"background-color:#000000;height:70px;width:20…

云计算与大数据笔记之Spark【重点:流水线机制】

图片和部分笔记来自于厦门大学-林子雨-大数据技术原理与应用&#xff08;第3版&#xff09; 配套PPT 三大分布式计算系统开源项目Hadoop、Spark、Storm Storm、Hadoop和Spark都是处理大数据的框架&#xff0c;但它们各自在设计上有着不同的侧重点&#xff0c;这导致了它们在实…

【工具-MATLAB】

MATLAB ■ MATLAB-简介■ MATLAB-应用领域■ MATLAB■ MATLAB■ MATLAB■ MATLAB ■ MATLAB-简介 MATLAB是matrix&laboratory两个词的组合&#xff0c;意为矩阵工厂&#xff08;矩阵实验室&#xff09; 美国MathWorks公司出品的商业数学软件, MATLAB和Mathematica、Maple并…

突破编程_前端_JS编程实例(分割窗体组件)

1 开发目标 分隔窗体组件旨在提供灵活的窗体分隔功能&#xff0c;支持横向分割与纵向分隔两种类型&#xff0c;并具备拖拽调整窗体比例的功能&#xff0c;同时提供最小比例设置&#xff0c;以防止窗体被过度缩小&#xff1a; 2 详细需求 2.1 分隔窗体类型 &#xff08;1&…

经纬恒润AUTOSAR产品成功适配芯来RISC-V车规内核

近日&#xff0c;经纬恒润AUTOSAR基础软件产品INTEWORK-EAS&#xff08;ECU AUTOSAR Software&#xff0c;以下简称EAS&#xff09;在芯来提供的HP060开发板上成功适配芯来科技的RISC-V处理器NA内核&#xff0c;双方携手打造了具备灵活、可靠、高性能、强安全性的解决方案。这极…

护眼台灯哪个牌子好?护眼台灯品牌排行前十名推荐

台灯可以说家家必备的一盏灯具&#xff0c;如果家长有正在上学的孩子的更需要一款好的台灯&#xff0c;因为不管是看书、写字、阅读都离不开台灯的帮助&#xff0c;而且一款好的台灯不仅仅能够提供明亮充足的照明环境&#xff0c;而且还能起到保护视力健康&#xff0c;预防近视…

【解决方案】荣耀系统Android8.0 system目录Read-only file system

本来以为直接把Charles证书改成系统证书格式&#xff0c;然后通过mt管理器root之后移动到系统证书目录就行了&#xff0c;结果访问baidu仍然显示网络错误&#xff0c;折腾一晚上。安装为用户证书&#xff0c;又与系统证书冲突。 手机型号&#xff1a;荣耀v10 EMUI&#xff1a…

【Apple Vision Pro 应用】一款专为Vision Pro设计的三维空间无尽跑酷游戏

跑酷类游戏基本上是手机时代的大爆款&#xff08;充分利用手机的交互优势&#xff09;&#xff0c;代表神庙逃亡、地铁跑酷等&#xff0c;在VP眼镜端&#xff0c;还能玩出什么花样来&#xff0c;我知道我身边有一个创业者在做&#xff0c;目前还没上线&#xff0c;分享一家国外…

vite + vue项目报错:Uncaught ReferenceError: globalThis is not defined

vite vue项目报错&#xff1a;Uncaught ReferenceError: globalThis is not defined。 原因是&#xff0c;谷歌浏览器版本太低&#xff0c;引用的第三方库不支持导致。 解决方法&#xff1a;在index.html中添加 <script>this.globalThis || (this.globalThis this) &…

需要本地后端的真机调试-微信

打开和修改IP改为电脑与手机同一局域网的 不知道这个要不要

Spring Boot项目启动速度优化

1、配置自动配置排除列表&#xff0c;减少启动自动配置扫描&#xff0c;配置项spring.autoconfigure.exclude 2、启动类添加索引注解Indexed&#xff0c;去除启动过程中 Components 的扫描步骤&#xff0c;直接从索引文件读取。 import org.springframework.stereotype.lndexe…

AIGC浪潮下,鹅厂新一代前端人的真实工作感受

AIGC 这一时代潮流已然不可阻挡&#xff0c;我们要做的不是慌乱&#xff0c;而是把握住这个时代的机会。本文就和大家一起来探索在 AIGC 下&#xff0c;前端工程师即将面临的挑战和机遇。聊聊从以前到现在&#xff0c;AIGC 给我们带来了怎么样的变化&#xff0c;下一代前端工程…

【详细教程制作】用户列表

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

电脑分辨率怎么调,电脑分辨率怎么调整

随着电脑的普及以及网络的发展&#xff0c;我们现在在工作中都离不开对电脑的使用&#xff0c;今天小编教大家设置电脑分辨率&#xff0c;现在我们先了解这个分辨率是什么?通常电脑的显示分辨率就是屏幕分辨率&#xff0c;显示屏大小固定时&#xff0c;显示分辨率越高图像越清…

一个问题串联 Java 的几个基础知识

前言 关于 “” 和 equals() 的区别这个问题&#xff0c;我之前一直搞的很乱&#xff0c;虽然面试的时候一直没有被问到&#xff0c;但是我感觉这种是属于最基础的知识&#xff0c;如果不懂好像不是很好。后来我发现通过这个问题&#xff0c;可以串联起很多的知识点&#xff0…

正则表达式浅析

正则表达式&#xff0c;又称正规表示法、常规表示法&#xff08;英语&#xff1a;Regular Expression&#xff0c;在代码中常简写为regex、regexp或RE&#xff09;&#xff0c;计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很…

Linux多进程通信(3)——详细说说共享内存原理及使用例程

1.共享内存原理及优缺点 共享内存的原理便是将相同的一片物理内存映射到进程A和进程B不同的逻辑地址空间&#xff0c;两个进程同时访问这块物理内存&#xff08;共享内存&#xff09;。 1&#xff09;优点 共享内存是进程间通信访问速度最快。 例如消息队列&#xff0c;FIFO&…