在nvd3图表中更改xAxis的日期格式

时间:2016-06-25 03:46:20

标签: javascript d3.js nvd3.js

我有一个有效的多栏图表,但我无法更改日期格式。

在json数据字符串中,日期显示为2016-01-01,2016-02-01等,我希望在x轴上将其读作1月16日。

这是我的小提琴:

http://jsfiddle.net/xpz526xo/6/

以下是我尝试添加以更改日期但无效的内容

package com.demo; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.EnableAutoConfiguration; import org.springframework.boot.autoconfigure.SpringBootApplication; import com.demo.controllers.StudentController; @SpringBootApplication @EnableAutoConfiguration public class Application { @Override protected SpringApplicationBuilder configure( SpringApplicationBuilder application) { return application.sources(Application.class); } public static void main(String[] args) { SpringApplication.run(Application.class, args); } }

为我在移动电话上提交格式化上述代码道歉

1 个答案:

答案 0 :(得分:1)

这样做:

var format = d3.time.format("%Y-%d-%m").parse;//needed to parse the string to date
var chart = nv.models.multiBarChart();
chart.xAxis
.tickFormat(function(d) {
  return d3.time.format('%m %y')(format(d)); 
});

必须定义xAxis / yAxis刻度格式,然后才能在SVG 中绘制它(这就是为什么你没有看到格式化的刻度)。

工作代码here