javascript - 无法使用新数据格式绘制图表

标签 javascript d3.js nvd3.js

我正在转换my existing chart支持新的数据格式。

X 轴的旧数据格式:使用纪元格式的日期,例如 1356912000000(数字)
X 轴的新数据格式:使用常规范式的日期,例如 "2012-12-31" (String)

Y 轴的格式相同(数字)。

按照旧数据格式绘制图表:http://jsfiddle.net/rdesai/vfe2B/85/
按照新数据格式绘制的图表:http://jsfiddle.net/rdesai/vfe2B/84/

对于旧格式,我将纪元日期转换为常规日期并将其提供给刻度。对于新格式,不确定我需要做什么。

如何解决这个问题?

最佳答案

请阅读D3 page on time formatting

在您的情况下,您只需将格式为“2012-12-31”的这些字符串转换为日期:

> var dateFormat = d3.time.format("%Y-%m-%d");
> dateFormat.parse("2012-12-31");
Mon Dec 31 2012 00:00:00 GMT+0100 (CET)

编辑:在这里找到一个工作 fiddle http://jsfiddle.net/vfe2B/94/

错误是您在创建图表时需要使用这些日期解析器将字符串转换为日期。函数 .tickformat 只是控制如何在轴上表示数据,但是在创建图表时需要向图表“提供”日期,如下所示:

.x(function(d) { return dateFormat.parse(d[0]) })

我更改了 jsfiddle 中的刻度格式,以便您可以更好地理解差异。

关于javascript - 无法使用新数据格式绘制图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24673333/

相关文章:

javascript - Dojo 构建最终会出现警告,但为什么呢?

javascript - D3.js 时间轴根本不过滤 map 上的兴趣点

nvd3.js 如何以货币显示 yAxis tickFormat

javascript - 更新 d3 中的折线图不起作用

javascript - 如何使用 d3 绘制动画折线图,同时需要每 1 秒更新一次数据表?

javascript - X 轴标签错位

javascript - 部分 View 和 jQuery 图形问题

javascript - 如何使 ul 列表中的元素不可排序且不可拖动?

javascript - d3js : why is first bar's data displaying incorrectly?

javascript - 与浏览器控制台相比,为什么相同的 jQuery 选择器在 React Component hooks 中具有不同的输出?