我正在绘制一个带有一个条形图和两个折线图的直流复合图表。我使用以下代码:
compositeChart1.width(600)
.height(250)
.margins({top: 10, right: 100, bottom: 70, left:80})
.transitionDuration(800)
.dimension(mvValue)
.elasticY(true)
**.x(d3.scale.ordinal().domain(["AFFILIATES","CSE","DISPLAYADS","EMAIL","MOBILEWEB","ORGANIC","OTHERS","SEM","SEO" ]))**
.xUnits(dc.units.ordinal)
.renderHorizontalGridLines(true)
.title(function(d) { return [d.key+"(TY)" + ":"+ myFormat(d3.round(d.value.avgIndex,2)),
d.key+"(LW)" + ":"+ myFormat(d3.round(d.value.avgIndex2,2)),
d.key+"(LY)"+":"+ myFormat(d3.round(d.value.avgIndex1,2)),
d.key+"(WoW)"+":"+ myFormat(d3.round(((d.value.avgIndex/d.value.avgIndex2 -1)*100),2))+"%",
d.key+"(YoY)"+":"+ myFormat(d3.round(((d.value.avgIndex/d.value.avgIndex1 -1)*100),2))+"%"]
.join("\n") })
.compose([
dc.barChart(compositeChart1)
.width(600)
.height(250)
.group(mvValueGroupSum,"This Year")
.valueAccessor(function (p) {return p.value.avgIndex;})
.barPadding(0.5)
.brushOn(false)
.elasticY(true)
// .x(d3.scale.ordinal().domain(["SEM","SEO", "CSE","AFFILIATES","MOBILEWEB","EMAIL","OTHERS","ORGANIC", "DISPLAYADS"]))
.margins({top: 10, right: 100, bottom: 70, left:80})
.gap(10),
dc.lineChart(compositeChart1)
.width(600)
.height(250)
.group(mvValueGroupSum,"Last Year")
.valueAccessor(function (p) {return p.value.avgIndex1;})
// .x(d3.scale.ordinal().domain(["SEM","OTHERS","SEO", "CSE","ORGANIC","MOBILEWEB", "AFFILIATES","EMAIL", "DISPLAYADS"]))
.margins({top: 10, right: 100, bottom: 70, left:80})
.yAxisLabel($('#metric').val()+'(TY)')
.brushOn(false)
.elasticY(true)
.colors('orange'),
dc.lineChart(compositeChart1)
.width(600)
.height(250)
.group(mvValueGroupSum,"Last Year")
.valueAccessor(function (p) {return p.value.avgIndex2;})
// .x(d3.scale.ordinal().domain(["SEM","OTHERS","SEO", "CSE","ORGANIC","MOBILEWEB", "AFFILIATES","EMAIL", "DISPLAYADS"]))
.margins({top: 10, right: 100, bottom: 70, left:80})
.yAxisLabel($('#metric').val()+'(TY)')
.brushOn(false)
.elasticY(true)
.colors('#663300')
])
.yAxisLabel($('#metric').val()+'(TY)')
.rightYAxisLabel($('#metric').val()+'(LY)')
.renderHorizontalGridLines(true)
.renderlet(function (chart) {
chart.selectAll("g._0").attr("transform", "translate(" + -2 + ", 0)");
chart.selectAll("g._1").attr("transform", "translate(" + 22 + ", 0)");
chart.selectAll("g._2").attr("transform", "translate(" + 22 + ", 0)");
});
compositeChart1.renderlet(function(chart){
chart.selectAll("g.x text")
.attr('transform', "rotate(30)")
.style('text-anchor','start')
.style('font-weight','bold');
});
我想更改我的图表元素的顺序,我尝试通过更改上面突出显示的行中的顺序,但不知何故,只有我的条形图选择我指定的顺序和折线图,无论顺序如何一个按字母顺序排列的趋势导致折线图奇怪地扭曲。是否有某种方式,我可以解决它或者它必须始终按字母顺序排列吗?