Question

我使用以下代码绘制了复合图表：

compositeChart.width(1200)
    .height(240)
    .margins({top: 10, right: 100, bottom: 70, left:80})
    .transitionDuration(800)
    .dimension(depValue)
    .elasticY(true)
    .filter('(All)')
    .x(d3.scale.ordinal().domain(["AUTO & TIRES","AUTO & TIRES(LY)","BABY","BABY(LY)", "CLOTHING","CLOTHING(LY)" ,"ELECTRONICS","ELECTRONICS(LY)", "GARDEN","GARDEN(LY)", "GROCERY","GROCERY(LY)", "HEALTH","HEALTH(LY)", "HOME","HOME(LY)", "HOME IMPROVEMENT","HOME IMPROVEMENT(LY)", "PHOTO","PHOTO(LY)", "SPORTS","SPORTS(LY)", "TOYS","TOYS(LY)", "VIDEO GAMES","VIDEO GAMES(LY)"]))
    .xUnits(dc.units.ordinal)
    .renderHorizontalGridLines(true)
    .title(function(d) { 
      return d.key + ": " + d3.round(d.value.avgIndex,2); })

     .compose([
            dc.barChart(compositeChart)
                .group(group,"This Year")
                .colors('orange')
                .valueAccessor(function (p) {return p.value.avgIndex;})
                .clickFilterBehavior("replace")
                .barPadding(0.5)
                .brushOn(false)
                .elasticY(true)
                .title(function(d) { 
                return d.key + ": " + d3.round(d.value.avgIndex,2); })
                .filter('(All)')
                .margins({top: 10, right: 100, bottom: 70, left:80})
                .gap(15),

            dc.barChart(compositeChart)
               .colors('grey')
                .group(group1,"Last Year")
                .valueAccessor(function (p) {return p.value.avgIndex;})
                .margins({top: 10, right: 100, bottom: 70, left:80})
                 .barPadding(0.5)
                .gap(15)
                .yAxisLabel($('metric').value+'(TY)')
                .clickFilterBehavior("replace")
                .brushOn(false)
                .title(function(d) { return d.key + ": " + d3.round(d.value.avgIndex,2); })
                .elasticY(true)
               .colors(["#orange"])
              ])
                .yAxisLabel($('metric').value+'(TY)')
                .rightYAxisLabel($('metric').value+'(LY)')
                .renderHorizontalGridLines(true)
                .renderlet(function (chart) {
        chart.selectAll("g._1").attr("transform", "translate(" + 26 + ", 0)");

    });
        compositeChart.renderlet(function(chart){
  chart.selectAll("g.x text")

   .attr('transform', "rotate(30)")
   .style('text-anchor','start')
   .style('font-weight','bold');
});

我面临的问题是.colors（'xyz'）。在我的第一个条形图系列中，颜色变化反映了，但在另一个，无论我放哪种颜色，它总是黑色。为什么会这样？

Answer 1

因为.colors(["#orange"])行。你应该删除它。

dc.js复合图表中条形的颜色没有变化

1 个答案: