热门标签 | 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它是多余的 - 类型:日期就足够了


推荐阅读
  • 在1995年,Simon Plouffe 发现了一种特殊的求和方法来表示某些常数。两年后,Bailey 和 Borwein 在他们的论文中发表了这一发现,这种方法被命名为 Bailey-Borwein-Plouffe (BBP) 公式。该问题要求计算圆周率 π 的第 n 个十六进制数字。 ... [详细]
  • 本文探讨了Python类型注解使用率低下的原因,主要归结于历史背景和投资回报率(ROI)的考量。文章不仅分析了类型注解的实际效用,还回顾了Python类型注解的发展历程。 ... [详细]
  • 本文探讨了异步编程的发展历程,从最初的AJAX异步回调到现代的Promise、Generator+Co以及Async/Await等技术。文章详细分析了Promise的工作原理及其源码实现,帮助开发者更好地理解和使用这一重要工具。 ... [详细]
  • 利用Node.js实现PSD文件的高效切图
    本文介绍了如何通过Node.js及其psd2json模块,快速实现PSD文件的自动化切图过程,以适应项目中频繁的界面更新需求。此方法不仅提高了工作效率,还简化了从设计稿到实际应用的转换流程。 ... [详细]
  • 本文探讨了如何利用RxJS库在AngularJS应用中实现对用户单击和拖动操作的精确区分,特别是在调整区域大小的场景下。 ... [详细]
  • 本文探讨了如何在PHP与MySQL环境中实现高效的分页查询,包括基本的分页实现、性能优化技巧以及高级的分页策略。 ... [详细]
  • 处理Android EditText中数字输入与parseInt方法
    本文探讨了如何在Android应用中从EditText组件安全地获取并解析用户输入的数字,特别是用于设置端口号的情况。通过示例代码和异常处理策略,展示了有效的方法来避免因非法输入导致的应用崩溃。 ... [详细]
  • 本文介绍了如何使用Node.js通过两种不同的方法连接MongoDB数据库,包括使用MongoClient对象和连接字符串的方法。每种方法都有其特点和适用场景,适合不同需求的开发者。 ... [详细]
  • Pandas参数调整实用指南
    在使用Pandas处理数据时,由于数据集大小和格式的不同,相同的函数或方法可能产生不同的效果。了解如何调整Pandas的参数设置,可以让我们更灵活地应对各种数据挑战,提高数据分析的效率和质量。 ... [详细]
  • 探讨了在HTML表单中使用元素代替进行表单提交的方法。 ... [详细]
  • 深入解析 C++ 中的 String 和 Vector
    本文详细介绍了 C++ 编程语言中 String 和 Vector 的使用方法及特性,旨在帮助开发者更好地理解和应用这两个重要的容器。 ... [详细]
  • 使用Matlab创建动态GIF动画
    动态GIF图可以有效增强数据表达的直观性和吸引力。本文将详细介绍如何利用Matlab软件生成动态GIF图,涵盖基本代码实现与高级应用技巧。 ... [详细]
  • 本文介绍了如何在AngularJS应用中使用ng-repeat指令创建可单独点击选中的列表项,并详细描述了实现这一功能的具体步骤和代码示例。 ... [详细]
  • 本文详细解析了MySQL中常见的几种错误,并提供了具体的解决方法,帮助开发者快速定位和解决问题。 ... [详细]
  • 在使用 Nginx 作为服务器时,发现 Chrome 能正确从缓存中读取 CSS 和 JS 文件,而 Firefox 却无法有效利用缓存,导致加载速度显著变慢。 ... [详细]
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社区 版权所有