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.hqwc.cn/news/578656.html

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

相关文章

matlab 复制点云

目录 一、概述1、算法概述2、主要函数3、参考文献二、代码实现三、结果展示四、参考链接本文由CSDN点云侠原创,原文链接。如果你不是在点云侠的博客中看到该文章,那么此处便是不要脸的爬虫。 一、概述 1、算法概述

OpenAI发布Voice Engine模型!用AI合成你的声音!

大家好,我是木易,一个持续关注AI领域的互联网技术产品经理,国内Top2本科,美国Top10 CS研究生,MBA。我坚信AI是普通人变强的“外挂”,所以创建了“AI信息Gap”这个公众号,专注于分享AI全维度知识…

写作类AI推荐(二)

本章要介绍的写作AI如下: 火山写作 主要功能: AI智能创作:告诉 AI 你想写什么,立即生成你理想中的文章AI智能改写:选中段落句子,可提升表达、修改语气、扩写、总结、缩写等文章内容优化:根据全文…

CTF题型 nodejs(2) Js沙盒vmvm2逃逸原理总结典型例题

CTF题型 nodejs(2) Js沙盒逃逸原理&典型例题 文章目录 CTF题型 nodejs(2) Js沙盒逃逸原理&典型例题一.vm原理以及逃逸1.基本用法2.如何逃逸汇总1)this为对象2)this为null( Object.create(null))a .可用输出直接触发toString方法b.调用属性触发 3)Object.create(null)沙…

【讲解下go和java的区别】

🔥博主:程序员不想YY啊🔥 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家💫 🤗点赞🎈收藏⭐再看💫养成习惯 🌈希望本文对您有所裨益,如有…

2024 ccfcsp认证打卡 2022 03 01 未初始化警告

import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner inputScanner new Scanner(System.in);int n inputScanner.nextInt(); // 输入数字的个数int k inputScanner.nextInt(); // 输入赋值语句的数量int[] list1 new int[k]; …

稀碎从零算法笔记Day33-LeetCode:生命游戏

今天是“耶稣受难人”,笔者给自己放了天假hhh 且慢,还是会写一点的。 根据 百度百科 , 生命游戏 ,简称为 生命 ,是英国数学家约翰何顿康威在 1970 年发明的细胞自动机。 题型:矩阵、原地实现、位运算 链…

Python Flask Web框架初步入门

前言 flask基础 搭建flask服务器 定义html 使用templates模板定义页面的html html页面编写 render_template传参变量 定义图片 创建static目录,存入图片 html编写 flask入门 网站多域名 网站之间超链接跳转 入门案例 将centos的rpm包下载链接集成到自…

Discourse 用户可以自己修改用户名吗

Discourse 是可以修改用户名的,但用户修改自己的用户名会有时间的限制。 这是因为根据官方的说法就是当用户修改用户名后可能会导致内容的失效等问题。 在默认的安装配置下,用户可以在完成注册后的 3 天自己对用户名进行修改。 3 天以后,用…

在jupyter notebook中使用conda环境

在jupyter notebook中使用conda环境 1. 环境配置 conda activate my-conda-env # this is the environment for your project and code conda install ipykernel conda deactivateconda activate base # could be also some other environment conda install nb_cond…

Docker Desktop 在 Windows 上的安装和使用

目录 1、安装 Docker Desktop 2、使用 Docker Desktop (1)运行容器 (2)查看容器信息 (3)数据挂载 Docker Desktop是Docker的官方桌面版,专为Mac和Windows用户设计,提供了一个简…

RN在android/ios手机剪切图片的操作

之前写过一个React Native调用摄像头画面及拍照和保存图片到相册全流程但是这个仅限于调用摄像头拍照并保存图片,今天再写一个版本的操作,这个博客目前实现的有三点操作: 调用摄像头拍照对照片进行剪切从相册选取图片 功能上面来说有两点: 点击按钮可以对摄像头进行拍照,拍完照…