我想制作一个包含未知数量林卡图的合成图表,这些图都基于相同维度,但是每个图都有回调减少函数来计算计数,求和和平均值,但是对于给定的字段值,每个过滤数据尺寸。
我不知道如何使它工作。出现图形坐标和图例,但未画线。
这是我目前正在做的事情:
var tablaCount = dc.dataCount("#dataCount");
var tablaDatos = dc.dataTable("#tabla");
var ofs = 0, pag = 10, ndxSize = 0;
var ndx, all;
d3.json("/PruebaConcepto/json/userdashboard-vgodoy-pruebax_20181023111343.json").then(function(data) {
ndx = crossfilter(data);
ndxSize = ndx.size();
all = ndx.groupAll();
var compositeChartline1 = dc.compositeChart("#lineChartline1");
var dimensionline1 = ndx.dimension(function(d) { return [d.horasacta, d.aerodromo] ; });
var groupline1 = dimensionline1.group().reduce(
function (p, v) {
++p.count;
p.pct = (p.count / ndxSize) * 100;
p.sum += ("viento_int_viento" != "kpigroup" ? (v.viento_int_viento ? v.viento_int_viento : 0) : 0);
p.avg = ((p.sum ? p.sum : 0) / p.count);
return p;
},
function (p, v) {
--p.count;
p.pct = (p.count / ndxSize) * 100;
p.sum -= ("viento_int_viento" != "kpigroup" ? (v.viento_int_viento ? v.viento_int_viento : 0) : 0);
p.avg = ((p.sum ? p.sum : 0) / p.count);
return p;
},
function () {
return {count: 0, pct: 0, sum: 0, avg: 0};
}
);
var keysline1 = groupline1.all().filter(function(d) {return d.key[0]});
var seriesline1 = [];
var tmpseriesline1 = [];
for (var i = 0; i < keysline1.length; i++) {
tmpseriesline1.push(keysline1[i].key[1]);
}
seriesline1 = (tmpseriesline1.filter(function(item, pos) { return tmpseriesline1.indexOf(item) == pos;})).slice();
tmpseriesline1 = 0;
var yMaxline1 = 0;
for (var i = 0; i < groupline1.size() && !(groupline1.top(Infinity)[i] == null); i++) {
if (yMaxline1 < groupline1.top(Infinity)[i].value.avg) {
yMaxline1 = groupline1.top(Infinity)[i].value.avg;
}
}
var yMagline1 = Math.pow(10, Math.floor((Math.log(yMaxline1) / Math.LN10 + 0.000000001))) / 10;
yMaxline1 = Math.ceil(yMaxline1 + yMagline1);
var xRangeline1 = [];
var tmpxRangeline1 = [];
for (var i = 0; i < keysline1.length; i++) {
tmpxRangeline1.push(keysline1[i].key[0]);
}
xRangeline1 = tmpxRangeline1.filter(function(item, pos) { return tmpxRangeline1.indexOf(item) == pos;});
tmpxRangeline1 = 0;
var color = ["red", "green", "yellow"];
var groupsline1 = [seriesline1.length];
var lineChartsline1 = [seriesline1.length];
for (var i = 0; i < seriesline1.length; i++) {
var tmpSeriesline1 = seriesline1[i]
var tmpGroupline1 = dimensionline1.group().reduce(
function (p, v) {
++p.count;
p.pct = (p.count / ndxSize) * 100;
p.sum += ("viento_int_viento" != "kpigroup" ? (v.viento_int_viento ? v.viento_int_viento : 0) : 0);
p.avg = ((p.sum ? p.sum : 0) / p.count);
return p;
},
function (p, v) {
--p.count;
p.pct = (p.count / ndxSize) * 100;
p.sum -= ("viento_int_viento" != "kpigroup" ? (v.viento_int_viento ? v.viento_int_viento : 0) : 0);
p.avg = ((p.sum ? p.sum : 0) / p.count);
return p;
},
function () {
return {count: 0, pct: 0, sum: 0, avg: 0};
}
);
groupsline1[i] = tmpGroupline1.all().filter(function(d) { return d.key[1] == tmpSeriesline1; });
lineChartsline1[i] = dc.lineChart(compositeChartline1)
.group(groupsline1[i], seriesline1[i])
.valueAccessor(function(d) {
return parseFloat(d.value.avg);
})
.title(function(d) {
var s = [];
s.push(d.key[1] + ":");
s.push("Conteo: " + (isNaN(d.value.count) ? "-" : d.value.count + " (" + d.value.pct.toFixed(2) + "%)"));
if ("avg" != "count") {
s.push("Media: " + (isNaN(d.value.avg) ? "-" : d.value.avg.toFixed(2) + ("avg" != "pct" ? "" : "%")));
}
return s.join("\n");
})
.colors(color[i])
.dashStyle([5,5]);
}
compositeChartline1
.width(500).height(500)
.margins({top: 60, right: 60, bottom: 120, left: 120})
.x(d3.scaleOrdinal().domain(xRangeline1))
.xUnits(dc.units.ordinal)
.y(d3.scaleLinear().domain([0, yMaxline1]).range([500,0]))
.xAxisLabel("X")
.yAxisLabel("Y")
.legend(dc.legend().x(40).y(20).itemHeight(seriesline1.length).gap(10))
.dimension(dimensionline1)
.renderHorizontalGridLines(true)
.brushOn(false)
.elasticY(true)
.renderlet(function (chart) {
chart.selectAll('g.x text').attr('transform', 'translate(-30,30) rotate(315)');
})
.compose(lineChartsline1);
}
谢谢。