在 dc.seriesChart 中创建 3 行
Create 3 lines in dc.seriesChart
如何在 dc.seriesChart 中创建 3 行(组 1、组 2、组 3),在此仪表板中 -
https://jsfiddle.net/gubzh/j15szqhk/24/
var ndx = crossfilter(records);
var all = ndx.groupAll();
//console.log(all);
var priorityDim = ndx.dimension(function (d) { return d.priority; });
var dateDim = ndx.dimension(function (d) { return d.timestamp; });
var datePriorityDim = ndx.dimension(function (d) { return [+d.priority, +d.timestamp];});
var priorityGroup = priorityDim.group();
var numRecordsByDate = dateDim.group();
var datePriorityGroup = datePriorityDim.group().reduceCount();
var minDate = dateDim.bottom(1)[0].timestamp;
var maxDate = dateDim.top(1)[0].timestamp;
priorityTimeChart
.width(400)
.height(200)
.chart(function(c) { return new dc.lineChart(c); })
.x(d3.scaleTime().domain([minDate, maxDate]))
.brushOn(false)
.yAxisLabel("Events")
.xAxisLabel("Date")
.elasticY(true)
.dimension(dateDim)
.group(datePriorityGroup)
.seriesAccessor(function(d) {return "priority: " + d.key[0];})
.keyAccessor(function(d) {return +d.key[1];})
.valueAccessor(function(d) {return +d.value;})
.legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
priorityTimeChart.yAxis().tickFormat(function(d) {return d3.format(',d')(d);});
priorityTimeChart.margins().left += 10;
例如-
https://dc-js.github.io/dc.js/examples/range-series.html
提前致谢。
你基本上已经明白了,但看起来你已经+
到处撒了水,努力让事情正常进行。
在JavaScript中,表达式前的+
是将其转换为数字的简单方法。
您通常只需要在从 CSV 文件中提取数据时执行此操作,其中所有值都是字符串。
但是,您转换的很多东西都不是数字。特别是你
var datePriorityDim = ndx.dimension(function (d) { return [+d.priority, +d.timestamp];});
应该是
var datePriorityDim = ndx.dimension(function (d) { return [d.priority, d.timestamp];});
d.priority
是字符串,d.timestamp
是日期。我用
记录了你的群组内容
console.log(datePriorityGroup.all())
并注意到您的钥匙是
[NaN, 1581314400000]
将日期转换为数字似乎无害,但将优先级更改为 NaN
将导致所有优先级组被合并在一起。本该有12个的结果却只有4个。
有了修复:
如何在 dc.seriesChart 中创建 3 行(组 1、组 2、组 3),在此仪表板中 - https://jsfiddle.net/gubzh/j15szqhk/24/
var ndx = crossfilter(records);
var all = ndx.groupAll();
//console.log(all);
var priorityDim = ndx.dimension(function (d) { return d.priority; });
var dateDim = ndx.dimension(function (d) { return d.timestamp; });
var datePriorityDim = ndx.dimension(function (d) { return [+d.priority, +d.timestamp];});
var priorityGroup = priorityDim.group();
var numRecordsByDate = dateDim.group();
var datePriorityGroup = datePriorityDim.group().reduceCount();
var minDate = dateDim.bottom(1)[0].timestamp;
var maxDate = dateDim.top(1)[0].timestamp;
priorityTimeChart
.width(400)
.height(200)
.chart(function(c) { return new dc.lineChart(c); })
.x(d3.scaleTime().domain([minDate, maxDate]))
.brushOn(false)
.yAxisLabel("Events")
.xAxisLabel("Date")
.elasticY(true)
.dimension(dateDim)
.group(datePriorityGroup)
.seriesAccessor(function(d) {return "priority: " + d.key[0];})
.keyAccessor(function(d) {return +d.key[1];})
.valueAccessor(function(d) {return +d.value;})
.legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70));
priorityTimeChart.yAxis().tickFormat(function(d) {return d3.format(',d')(d);});
priorityTimeChart.margins().left += 10;
例如- https://dc-js.github.io/dc.js/examples/range-series.html
提前致谢。
你基本上已经明白了,但看起来你已经+
到处撒了水,努力让事情正常进行。
在JavaScript中,表达式前的+
是将其转换为数字的简单方法。
您通常只需要在从 CSV 文件中提取数据时执行此操作,其中所有值都是字符串。
但是,您转换的很多东西都不是数字。特别是你
var datePriorityDim = ndx.dimension(function (d) { return [+d.priority, +d.timestamp];});
应该是
var datePriorityDim = ndx.dimension(function (d) { return [d.priority, d.timestamp];});
d.priority
是字符串,d.timestamp
是日期。我用
console.log(datePriorityGroup.all())
并注意到您的钥匙是
[NaN, 1581314400000]
将日期转换为数字似乎无害,但将优先级更改为 NaN
将导致所有优先级组被合并在一起。本该有12个的结果却只有4个。
有了修复: