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

五、最后

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

增强现实(AR)的开发工具

增强现实(AR)的开发工具涵盖了一系列的软件和平台,它们可以帮助开发者创造出能够将虚拟内容融入现实世界的应用程序。以下是一些在AR领域内广泛使用的开发工具。北京木奇移动技术有限公司,专业的软件外包开发公司,欢迎…

计算机网络——30SDN控制平面

SDN控制平面 SDN架构 数据平面交换机 快速、简单,商业化交换设备采用硬件实现通用转发功能流表被控制器计算和安装基于南向API,SDN控制器访问基于流的交换机 定义了哪些可以被控制哪些不能 也定义了和控制器的协议 SDN控制器(网络OS&#…

Java JSON字符串相关问题

一、依赖包 <!--json包--><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.15</version></dependency> 二、举例 1.实体对象转Json字符串 1.1 代码实现 Dog.java: pack…

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

一、杂题 真题1&#xff1a; 真题2&#xff1a; 真题3&#xff1a; 真题4&#xff1a; 真题5&#xff1a; 真题6&#xff1a;

天空卫士SASE 2.0:赋能您的数智安全

在这个以数据为核心的时代&#xff0c;企业的安全防线正面临着空前的挑战。随着对网络安全和数字化协作的需求不断攀升&#xff0c;企业如何在确保数据安全的前提下&#xff0c;维持业务的高效运转&#xff0c;成为了一个亟待解决的问题。企业管理者亟需一种集网络安全、云服务…

Netty核心原理剖析与RPC实践21-25

Netty核心原理剖析与RPC实践21-25 21 技巧篇&#xff1a;延迟任务处理神器之时间轮 HahedWheelTimer Netty 中有很多场景依赖定时任务实现&#xff0c;比较典型的有客户端连接的超时控制、通信双方连接的心跳检测等场景。在学习 Netty Reactor 线程模型时&#xff0c;我们知道…

docker中配置交互式的JupyterLab环境的问题

【报错1】 Could not determine jupyter lab build status without nodejs 【解决措施】安装nodejs(利用conda进行安装/从官网下载进行安装&#xff09; 1、conda安装 conda install -c anaconda nodejs 安装后出现其他报错&#xff1a;Please install nodejs 5 and npm bef…

人工智能|推荐系统——搜索引擎广告

原文题目 Dark sides of artificial intelligence: The dangers of automated decision-making in search engine advertising(JASIST,2023) 人工智能的阴暗面:搜索引擎广告自动决策的危险 摘要 随着人工智能应用的日益广泛,搜索引擎供应商越来越多地要求广告商使用基于机…

JavaScript练手小技巧:仿米哈游官网人物跟随鼠标位移效果

最近&#xff0c;有同学找到我&#xff0c;说&#xff1a;老师&#xff0c;我想模仿米哈游官网。 我说&#xff1a;可以&#xff0c;很不错的。 她说&#xff1a;有些效果有点难&#xff0c;能不能帮我看下。 于是&#xff0c;我就简单大概粗糙的讲解了下大致的原理&#xf…

车载以太网AVB交换机 gptp透明时钟 8口 千兆/百兆可切换 SW1100TE

SW1100TE车载以太网交换机 一、产品简要分析 8端口千兆和百兆混合车载以太网交换机&#xff0c;其中包含2个通道的1000BASE-T1和5通道100BASE-T1泰科MATEnet接口引出,1个通道1000BASE-T标准以太网(RJ45接口)&#xff0c;可以实现车载以太网多通道交换&#xff0c;车载以太网网…

卷积神经网络(CNN)基础知识整理

卷积神经网络&#xff08;CNN&#xff09;基础知识整理 0写在前面 这两天陆续看了一些关于卷积神经网络的视频和博文&#xff0c;把我觉得比较有用的知识和内容梳理一下&#xff0c;理顺逻辑&#xff0c;自己也可加深理解&#xff0c;写在这里&#xff0c;日后想看&#xff0…

探索直播美颜技术:计算机视觉在美颜SDK开发中的应用

下文&#xff0c;小编将深入探讨美颜技术在计算机视觉领域中的应用&#xff0c;特别是美颜SDK的开发过程&#xff0c;并剖析其技术原理和实现方法。 一、美颜技术的发展 这些算法往往难以满足用户对高质量美颜效果的需求&#xff0c;因此需要更加先进的技术手段来实现。 二、…

git基本操作(小白入门快速上手一)

1、前言 我们接上一篇文章来讲&#xff0c;直接开干 1.1、工作区 1. 工作区很好理解&#xff0c;就是我们能看到的工作目录&#xff0c;就是本地的文件夹。 2. 这些本地的文件夹我们要通过 git add 命令先将他们添加到暂存区中。 3. git commit 命令则可以将暂存区中的文件提交…

基于.NET Core开发的轻量级分布式配置中心

前言 今天给大家推荐一个基于.NET Core开发的轻量级分布式配置中心&#xff1a;AgileConfig。 AgileConfig官方介绍 AgileConfig秉承轻量化的特点&#xff0c;部署简单、配置简单、使用简单、学习简单&#xff0c;它只提取了必要的一些功能&#xff0c;并没有像Apollo那样复…

大数据集成平台技术解决方案

1.1.系统概述 1.1.1需求描述 1.1.2.需求分析 1.1.3.重难点分析 1.1.4.重难点解决措施 1.2.系统架构设计 1.2.1.系统架构图 1.2.2.关键技术 软件开发全套资料包获取&#xff1a;软件项目开发全套文档下载_软件开发文档下载-CSDN博客 直接下载方式&#xff1a;本文末个人名片。

Springboot+MybatisPlus+EasyExcel实现文件导入数据

记录一下写Excel文件导入数据所经历的问题。 springboot提供的文件处理MultipartFile有关方法&#xff0c;我没有具体看文档&#xff0c;但目测比较复杂&#xff0c; 遂了解学习了一下别的文件上传方法&#xff0c;本文第1节记录的是springboot原始的导入文件方法写法&#xf…

5G PLMN相关概念

PLMN PLMN&#xff08;Public Land Mobile Network&#xff0c;公用陆地移动网络&#xff09;&#xff0c;是由政府或其批准的经营者为公众提供陆地移动通信业务而建立、经营的网络。PLMN与公众交换电话网&#xff08;PSTN&#xff09;互连&#xff0c;形成整个地区或国家规模…

机器人码垛机:智能仓储系统的重要组成部分

随着科技的飞速进步&#xff0c;机器人技术已经渗透到了许多行业领域&#xff0c;其中&#xff0c;仓储业尤为显著。机器人码垛机作为智能仓储系统的重要组成部分&#xff0c;不仅提高了码垛效率&#xff0c;还降低了人工成本和安全风险。然而&#xff0c;在其广泛应用的同时&a…

卸载原有的cuda,更新cuda

概述&#xff1a;看了一下自己的gpu&#xff0c;发现驱动可能装低了&#xff0c;随即尝试更新驱动&#xff0c;写下此篇 注&#xff1a;我原先是10.2的版本&#xff0c;改了之后是11.2&#xff0c;下面的图都用11.2的&#xff0c;不过不碍事 目录 第一步&#xff1a;查看现在…

关于未来自我的发展和一些学习方法(嵌入式方向)

我是一名大二的学生&#xff0c;考研还是就业&#xff0c;到底是重视专业课还是重视数学英语&#xff0c;这些问题一直困扰了我很久&#xff0c;但如今已经有了一些浅显的认识&#xff0c;所以才会想写这样一篇文章来记录一下自己的状态和未来的规划 下面的看法都是个人的看法&…