直流复合图表中的折线图未获订购

时间:2014-10-01 07:29:53

标签: dc.js

我正在绘制一个带有一个条形图和两个折线图的直流复合图表。我使用以下代码:

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');
});

我想更改我的图表元素的顺序,我尝试通过更改上面突出显示的行中的顺序,但不知何故,只有我的条形图选择我指定的顺序和折线图,无论顺序如何一个按字母顺序排列的趋势导致折线图奇怪地扭曲。是否有某种方式,我可以解决它或者它必须始终按字母顺序排列吗?

0 个答案:

没有答案