dc 차트의 범례 변경

Question

범례가있는 누적 형 차트가 있습니다. 차트 자체를 바꾸지 않고 전설의 순서를 변경하고 싶습니다. 즉, 현재 전설은 순서에 따라 표시됩니다

최소
N/A
대부분의


대부분의
N/A
최소

mostLeastLikelyChart 
     .width(leastMostLikelyChartWidth) 
     .height(chartHeight) 
     .margins(margins1) 
     .dimension(mostLeastLikelyDim) 
     .gap(10) 
     .ordinalColors(['#f7a35c','#7cb5ec','#08A4BA']) 
     .group(mostLeastLikelyGrp, "Least", function (d) {  
      return d.value.lst.count; 
     }) 
     .stack(mostLeastLikelyGrp, "N/A", function (d) { 
      return d.value.na.count; 
     }) 
     .stack(mostLeastLikelyGrp, "Most", function (d) { 
      return d.value.most.count; 
     }) 
     .x(d3.scale.ordinal().domain(mostLeastLikelyDim)) 
     .xUnits(dc.units.ordinal) 
     .renderHorizontalGridLines(true) 
     .elasticX(true) 
       .legend(dc.legend().x(leastMostLikelyChartWidth*0.80).y(0).itemHeight(13).gap(5).legendText(function(d){return d.name})) 

Answer 1

을 다음과 같이 내가 그것을 표시 할

와우, 가장 귀찮은 기본값입니다! 당신이 이것을 바꾸고 싶어하는 것은 당연합니다.

스택의 순서로 위에서 아래로이기 때문에 그것은 완전히 거꾸로입니다 :

다행히 dc.js를이 새는 추상화를 가지고 있으며, 그래서 이런 식으로 물건을 무시하는 정말 쉽습니다. 레전드에서 그릴 항목을 검색하기 위해 범례에 의해 내부적으로 호출되는 함수 chart.legendables()이 있습니다.

이처럼 재정의 할 수

 dc.override(chart, 'legendables', function() { 
      var items = chart._legendables(); 
      return items.reverse(); 
     }); 

휴! 훨씬 낫다!

나는 이것을 the stacked bar example에 추가했습니다. Farah를 지적 해 주셔서 고마워요. 우리는 이것에 대한 옵션을 만들 수 있으며, 스택 차트의 다른 방법으로 기본 설정을 할 수 있습니다.