我正在使用这个库:Dimensional Charting构建一些需要 CrossFilter 功能的相对标准的图表。
我一直在关注示例,但它们对我不起作用。
这是我的代码:
var dashData = crossfilter(data.report),
dataByHour = dashData.dimension(function(d){ return d3.time.hour(new Date(d.timestamp))}),
totalByHour = dataByHour.group().reduceSum(function(d) { return d.amount }),
dc.barChart("#graphTimeOverview")
.width(990) // (optional) define chart width, :default = 200
.height(250) // (optional) define chart height, :default = 200
.transitionDuration(500) // (optional) define chart transition duration, :default = 500
.margins({top: 10, right: 50, bottom: 30, left: 40})
.dimension(dataByHour) // set dimension
.group(totalByHour) // set group
.elasticY(true)
.centerBar(true)
.gap(1)
.x(d3.time.scale().domain([new Date(data.report[0].timestamp), new Date(data.report[(data.report.length - 1)].timestamp)]))
.round(d3.time.hour.round)
.xUnits(d3.time.hours)
.renderHorizontalGridLines(true);
dc.renderAll();
我知道交叉过滤器数据工作正常,这里是该组的一个示例:
totalByHour:
[ {key:(new Date(1361746800000)), value:6170.17},
{key:(new Date(1361678400000)), value:3003},
{key:(new Date(1361581200000)), value:2350.42},
{key:(new Date(1361667600000)), value:1636.19},
etc...
]
不幸的是,所有这些让我得到的是一个空图,它似乎正确计算了 y 轴,所以在我看来它可以读取数据,但是我从未看到任何条形值:
最佳答案
可能 data.report
数组未按时间戳排序(提供的示例未排序)。在您的代码中,您假设这些值已排序。您可以尝试使用
// Compute the timestamp extent
var timeExtent = d3.extent(data.report, function(d) { return d.timestamp; });
dc.barChart("#graphTimeOverview")
// more settings here
.x(d3.time.scale().domain(timeExtent.map(function(d) { return new Date(d); })))
.round(d3.time.hour.round)
.xUnits(d3.time.hours)
.renderHorizontalGridLines(true);
如果您提供 jsFiddle,将更容易判断问题出在哪里。
关于javascript - 使用 DC.js(crossfilter 和 d3 便利库)时出现问题 - 条形图不显示值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15908418/