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


推荐阅读
  • 本文讨论了编写可保护的代码的重要性,包括提高代码的可读性、可调试性和直观性。同时介绍了优化代码的方法,如代码格式化、解释函数和提炼函数等。还提到了一些常见的坏代码味道,如不规范的命名、重复代码、过长的函数和参数列表等。最后,介绍了如何处理数据泥团和进行函数重构,以提高代码质量和可维护性。 ... [详细]
  • 展开全部下面的代码是创建一个立方体Thisexamplescreatesanddisplaysasimplebox.#Thefirstlineloadstheinit_disp ... [详细]
  • 本文介绍了使用哈夫曼树实现文件压缩和解压的方法。首先对数据结构课程设计中的代码进行了分析,包括使用时间调用、常量定义和统计文件中各个字符时相关的结构体。然后讨论了哈夫曼树的实现原理和算法。最后介绍了文件压缩和解压的具体步骤,包括字符统计、构建哈夫曼树、生成编码表、编码和解码过程。通过实例演示了文件压缩和解压的效果。本文的内容对于理解哈夫曼树的实现原理和应用具有一定的参考价值。 ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Python正则表达式学习记录及常用方法
    本文记录了学习Python正则表达式的过程,介绍了re模块的常用方法re.search,并解释了rawstring的作用。正则表达式是一种方便检查字符串匹配模式的工具,通过本文的学习可以掌握Python中使用正则表达式的基本方法。 ... [详细]
  • 高质量SQL书写的30条建议
    本文提供了30条关于优化SQL的建议,包括避免使用select *,使用具体字段,以及使用limit 1等。这些建议是基于实际开发经验总结出来的,旨在帮助读者优化SQL查询。 ... [详细]
  • 本文介绍了在使用vue和webpack进行异步组件按需加载时可能出现的报错问题,并提供了解决方法。同时还解答了关于局部注册组件和v-if指令的相关问题。 ... [详细]
  • 开发笔记:实验7的文件读写操作
    本文介绍了使用C++的ofstream和ifstream类进行文件读写操作的方法,包括创建文件、写入文件和读取文件的过程。同时还介绍了如何判断文件是否成功打开和关闭文件的方法。通过本文的学习,读者可以了解如何在C++中进行文件读写操作。 ... [详细]
  • 本文介绍了深入浅出Linux设备驱动编程的重要性,以及两种加载和删除Linux内核模块的方法。通过一个内核模块的例子,展示了模块的编译和加载过程,并讨论了模块对内核大小的控制。深入理解Linux设备驱动编程对于开发者来说非常重要。 ... [详细]
  • 在编写业务代码时,常常会遇到复杂的业务逻辑导致代码冗长混乱的情况。为了解决这个问题,可以利用中间件模式来简化代码逻辑。中间件模式可以帮助我们更好地设计架构和代码,提高代码质量。本文介绍了中间件模式的基本概念和用法。 ... [详细]
  • 本文介绍了在wepy中运用小顺序页面受权的计划,包含了用户点击作废后的从新受权计划。 ... [详细]
  • dotNet变量和数据类型详解,包括声明变量和五大类型
    本文详细介绍了dotNet编程中的变量和数据类型,包括声明变量和五大类型(int、double、decimal、string、char)。文章通过案例演示了变量的声明和赋值方法,并解释了每种数据类型的特点和使用场景。此外,还介绍了变量命名规则和一些特殊情况,如String与string的区别、float类型的使用等。阅读本文可以帮助读者更好地理解和应用dotNet编程中的变量和数据类型。 ... [详细]
  • EPPlus绘制刻度线的方法及示例代码
    本文介绍了使用EPPlus绘制刻度线的方法,并提供了示例代码。通过ExcelPackage类和List对象,可以实现在Excel中绘制刻度线的功能。具体的方法和示例代码在文章中进行了详细的介绍和演示。 ... [详细]
  • 单页面应用 VS 多页面应用的区别和适用场景
    本文主要介绍了单页面应用(SPA)和多页面应用(MPA)的区别和适用场景。单页面应用只有一个主页面,所有内容都包含在主页面中,页面切换快但需要做相关的调优;多页面应用有多个独立的页面,每个页面都要加载相关资源,页面切换慢但适用于对SEO要求较高的应用。文章还提到了两者在资源加载、过渡动画、路由模式和数据传递方面的差异。 ... [详细]
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社区 版权所有