我目前正在工作正常的dc.js条形图,除了以下方面:
X轴表示多个日期,但是在同一天中,如果一个事件的关联值大于前一个,则它会与之重叠。
这里是一个示例:
例如:在2月22日,可能会看到橙色条被蓝色条隐藏。 那么,有没有一种方法可以自动解决此问题?我一直在浏览Dc文档,但是什么也没找到。
编辑:
我正在为图表发布代码,因此您可以看到我正在使用的比例和方法。
chart
.width(680)
.height(380)
.x(d3.scaleTime().domain([firstDate,lastDate]))
.xUnits(function(){return Object.keys(data.data).length;})
.brushOn(false)
.xAxisLabel('Aulas')
.yAxisLabel('presencas')
.dimension(DimensionHoras)
.barPadding(0.5)
.outerPadding(1)
.group(sumGroup)
.centerBar(true)
.legend(dc.legend().legendText(function(d, i) { return console.log(d);}))
.on('pretransition', function(chart) {
chart.selectAll("rect.bar").on("click", function (d) {
console.log(d);
var yy = data.data.filter(function(h){
return h.data_hora_ini == d.x
});
jQuery.each(yy, function(i, val){
graficoAssiduidade(val.data_hora_ini, val.cd_curso, val.uc_cod, "Data: " + val.dataSemFormato + ", " + val.hor_nome_turno);
});
chart.filter(null)
.filter(d.data.key)
.redrawGroup();
});
});
chart.on("renderlet", function(chart){
chart.selectAll("rect.bar").style("fill", function(d){
var filtro = data.data.filter(function(h){return h.data_hora_ini == d.x});
// console.log(d);
if(filtro[0].hor_nome_turno == "PL1")
return "#6BAED6";
else if(filtro[0].hor_nome_turno == "PL2")
return "orange";
else if(filtro[0].hor_nome_turno == "PL3")
return "yellow";
else if(filtro[0].hor_nome_turno == "TP1")
return "lightgreen";
});
});
答案 0 :(得分:0)
我认为这与值的大小无关,而只是条形图比它们表示的x值(即天)宽。
现在,以您指定的.xUnits
的方式:
.xUnits(function(){return Object.keys(data.data).length;})
您的图表正在计算钢筋宽度,就好像根本没有空白空间一样,允许钢筋占据全部宽度。
但是,由于您可能想要没有数据的空白,因此条形图应该只有一天的宽度。 为了完全正确,您应该使用
.xUnits(d3.timeDays)
但是,当然,现在所有的条形都将变得非常狭窄。我不确定解决这个问题的好方法。