热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

使用n3-charts绘制以日期为x轴的数据

本文介绍了如何使用n3-charts绘制以日期为x轴的数据,并提供了相应的代码示例。通过设置x轴的类型为日期,可以实现对日期数据的正确显示和处理。同时,还介绍了如何设置y轴的类型和其他相关参数。通过本文的学习,读者可以掌握使用n3-charts绘制日期数据的方法。

I have a some data that I would like to plot using n3-charts and this is what I have.

我有一些数据,我想用n3图表绘制,这就是我所拥有的。

$scope.optiOns= {
          axes: {
            x: {
              key: "dateRecorded",
              type: "date",
              labelFunction: function(d) { return d3.time.format("%Y-%m-%d").parse(d); }
            },
            y: {type: "linear"}
          },
          series: [
            {
              y: "weight",
              key: "weight",
              label: "Weight",
              color: "#2ca02c"
            }
          ]
        };

This is a sample piece of data that I would like to plot.

这是我想要绘制的示例数据。

[{dateRecorded: "2015-04-15", weight: 15}, {dateRecorded: 2015-04-16, weight: 16}, {dateRecorded: "2015-04-17", weight: 17}]

The chart shows up but no data is plotted. The browser console outputs the following.

图表显示但没有绘制数据。浏览器控制台输出以下内容。

TypeError: undefined is not a function
    at d3_time_parseFullYear 

So it cannot parse the date correctly but I am not sure what I am doing wrong.

所以它无法正确解析日期,但我不确定我做错了什么。

Any help would be appreciated.

任何帮助,将不胜感激。

2 个解决方案

#1


1  

It's a data problem, your data should look like this, then the labels will display correctly.

这是一个数据问题,您的数据应如下所示,然后标签将正确显示。

[
 {dateRecorded: new Date("2015-04-15"), weight: 15},
 {dateRecorded: new Date("2015-04-16"), weight: 16},
 {dateRecorded: new Date("2015-04-17"), weight: 17}
]

And in order to make it work remove the following line from axis options:

并且为了使其工作从轴选项中删除以下行:

labelFunction: function(d) { return d3.time.format("%Y-%m-%d").parse(d); 

See docs explanation regarding the type:

请参阅有关类型的文档说明:

type : optional, can be either 'date' or 'linear' (default is 'linear'). If set to 'date', the chart will expect Date objects as abscissas. No transformation is done by the chart itself, so the behavior is basically D3.js' time scale's.

type:optional,可以是'date'或'linear'(默认为'linear')。如果设置为'date',则图表将Date对象视为abscissas。图表本身没有进行任何转换,因此行为基本上是D3.js的时间尺度。

No need for the labelFunction.

不需要labelFunction。

#2


0  

Remove the labelFunction it is redundant - type:date is enough

删除labelFunction它是多余的 - 类型:日期就足够了


推荐阅读
  • 本文将深入探讨如何在不依赖第三方库的情况下,使用 React 处理表单输入和验证。我们将介绍一种高效且灵活的方法,涵盖表单提交、输入验证及错误处理等关键功能。 ... [详细]
  • 使用GDI的一些AIP函数我们可以轻易的绘制出简 ... [详细]
  • 深入解析 Vue 的 Transition 组件与第三方动画库的结合使用
    本文详细介绍了 Vue 中的 Transition 组件,探讨其内置类名机制、触发时机及自定义类名的应用。同时,结合 animate.css 和 GSAP 等第三方库,展示了如何实现复杂的动画效果。 ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • andr ... [详细]
  • Scala 实现 UTF-8 编码属性文件读取与克隆
    本文介绍如何使用 Scala 以 UTF-8 编码方式读取属性文件,并实现属性文件的克隆功能。通过这种方式,可以确保配置文件在多线程环境下的一致性和高效性。 ... [详细]
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
  • 优化局域网SSH连接延迟问题的解决方案
    本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置,可以显著缩短SSH连接的时间。 ... [详细]
  • 深入理解Redis的数据结构与对象系统
    本文详细探讨了Redis中的数据结构和对象系统的实现,包括字符串、列表、集合、哈希表和有序集合等五种核心对象类型,以及它们所使用的底层数据结构。通过分析源码和相关文献,帮助读者更好地理解Redis的设计原理。 ... [详细]
  • Unity编辑器插件:NGUI资源引用检测工具
    本文介绍了一款基于NGUI的资源引用检测工具,该工具能够帮助开发者快速查找和管理项目中的资源引用。其功能涵盖Atlas/Sprite、字库、UITexture及组件的引用检测,并提供了替换和修复功能。文末提供源码下载链接。 ... [详细]
  • 20100423:Fixes:更新批处理,以兼容WIN7。第一次系统地玩QT,于是诞生了此预备式:【QT版本4.6.0&#x ... [详细]
  • 本文详细介绍如何使用Samba软件配置CIFS文件共享服务,涵盖安装、配置、权限管理及多用户挂载等关键步骤。通过具体示例和命令行操作,帮助读者快速搭建并优化Samba服务器。 ... [详细]
  • 在多线程编程环境中,线程之间共享全局变量可能导致数据竞争和不一致性。为了解决这一问题,Linux提供了线程局部存储(TLS),使每个线程可以拥有独立的变量副本,确保线程间的数据隔离与安全。 ... [详细]
  • 在 Flutter 开发过程中,开发者经常会遇到 Widget 构造函数中的可选参数 Key。对于初学者来说,理解 Key 的作用和使用场景可能是一个挑战。本文将详细探讨 Key 的概念及其应用场景,并通过实例帮助你更好地掌握这一重要工具。 ... [详细]
  • 本文介绍如何在PostgreSQL数据库中正确插入和处理JSON数据类型,确保数据完整性和避免常见错误。 ... [详细]
author-avatar
子幽
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有