DC.js 条形图不显示日期轴

Question

我正在尝试显示一个显示日期计数的条形图，但条形图无法绘制，而且我在控制台中收到 NaN 错误。

有人能告诉我哪里错了吗？

var data1=[{budget:1,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"01 February 2017"},
{budget:7,billed:6,fees:1,feeVariance:3,Documents:"URL",date:"01 February 2018"},
{budget:10,billed:1,fees:4,feeVariance:3,Documents:"URL",date:"01 May 2017"},
{budget:14,billed:2,fees:4,feeVariance:2,Documents:"URL",date:"15 May 2017"},
{budget:2,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"02 June 2016"}];

var facts = crossfilter(data1);
var dateDimension = facts.dimension(function(d) { return new Date(d.date); });
var dateGroup = dateDimension.group().reduceCount(function(d){return new Date(d.date);});

var minDate = dateDimension.bottom(1)[0].date;
var maxDate = dateDimension.top(1)[0].date;

dc.barChart("#chart1")
  .width(800)
  .dimension(dateDimension)
  .group(dateGroup)
  .brushOn(false)
  .x(d3.time.scale().domain([minDate,maxDate]))
  .xUnits(d3.time.months);

dc.renderAll();

Answer 1

您需要先确定日期格式，以便dc.js可以将其理解为日期而不是简单的字符串。

所以首先，创建一个变量来设置日期格式：

var dateFormat = d3.time.format('%d %B %Y');

然后一个函数来制作我们的日期和月份字段：

data1.forEach(function(d) {
    d.date = dateFormat.parse(d.date);
    d.month = d3.time.month(d.date);
});

然后更改维度和组以使用 d.month

var dateDimension = facts.dimension(function(d) { return d.month; });
var dateGroup = dateDimension.group().reduceCount(function(d){return 
d.month;});

这将按月分组并按月提供 count/total。

完整代码如下：

var dateFormat = d3.time.format('%d %B %Y');

var data1=[{budget:1,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"01 
February 2017"},
{budget:7,billed:6,fees:1,feeVariance:3,Documents:"URL",date:"01 February 2018"},
{budget:10,billed:1,fees:4,feeVariance:3,Documents:"URL",date:"01 May 2017"},
{budget:14,billed:2,fees:4,feeVariance:2,Documents:"URL",date:"15 May 2017"},
{budget:2,billed:1,fees:1,feeVariance:0,Documents:"URL",date:"02 June 2016"}];

var facts = crossfilter(data1);

data1.forEach(function(d) {
d.date = dateFormat.parse(d.date);
d.month = d3.time.month(d.date);
});

var dateDimension = facts.dimension(function(d) { return d.month; });
var dateGroup = dateDimension.group().reduceCount(function(d){return d.month;});

var minDate = dateDimension.bottom(1)[0].date;
var maxDate = dateDimension.top(1)[0].date;

dc.barChart("#chart1")
.width(800)
.dimension(dateDimension)
.group(dateGroup)
.brushOn(false)
.x(d3.time.scale().domain([minDate,maxDate]))
.xUnits(d3.time.months);

dc.renderAll();

我向图表添加了一些额外的属性以确保正确显示所有条形：

.gap(2)
.outerPadding(5)
.centerBar(true)
.elasticX(true)
.xAxisPadding(20)

jsfiddle 示例： jsfiddle

DC.js 条形图不显示日期轴

DC.js barChart not displaying with date axis

dc.js