如何使用C3圖表繪製標準化堆棧圖？

Question

我想使用C3 Chart庫繪製標準化圖表。

我當前的代碼是

var chart = c3.generate({ 
     bindto: '#column-chart-main', 
     size: { 
      height: $('.chart-area').height() 
     }, 
     data: { 
      rows: 
       chartFinalData 
      , 
      type: 'bar', 
      labels: { 
       format: d3.format('%') 
      }, 
      colors: chartFinalColors, 
      transition: { 
       duration: 100 
      } 
     }, 
     zoom: { 
      enabled: true 
     }, 
     axis: { 
      y: { 
       show: false, 
       max: 1, 
       min: 0, 
       padding: {bottom:0} 
      }, 
      x: { 
       type: 'category', 
       categories: chartFinalBrands 
      }, 
      rotated: setChartType 
     }, 
     tooltip: { 
      format: { 
       value:d3.format('%') 
      } 
     }, 
     legend: { 
      show: $scope.chartTrans.showHideLegends, 
      position: 'inset', 
      inset: { 
       anchor: legendPosition, 
       x: 10, 
       y: 10, 
       step: legendSteps, 
      } 
     } 
    }); 

上面的代碼生成簡單的塊堆圖表。 但我需要正常化塊堆圖表

我目前的圖表 - current-chart 我需要圖表作爲每 - required-chart

在此先感謝

Answer 1

如果你想有一個標準化的堆棧條形圖，那麼你需要正常化數據第一，c3沒有圖表設置本身工作出

eg

var data = [ 
      ['data1', 30, 200, 200, 400, 150, 250], 
      ['data2', 130, 100, 100, 200, 150, 50], 
      ['data3', 230, 200, 200, 300, 250, 250] 
     ] 
; 

    // Normalise 
var scount = data.length; 
for (var n = 1; n < data[0].length; n++) { 
    var total = 0; 
    for (var m = 0; m < scount; m++) { 
     total += data[m][n]; 
    } 
    var ratio = 1.0/total; 
    for (var m = 0; m < scount; m++) { 
     data[m][n] *= ratio; 
    } 
} 

var chart = c3.generate({ 
    data: { 
     columns: data, 
     type: 'bar', 
     groups: [ 
      ['data1', 'data2', 'data3'] 
     ] 
    }, 
    tooltip: { 
      format: { 
       value:d3.format('%') 
      } 
     }, 
    axis : { 
     y : { 
       //max: 0.95, // for some reason this shows the last tick y as 100%, while 1.0 makes the last y tick 110%, don't know why 
       // thanks to a.n.onymous who figured out this worked better 
       max: 1, 
       padding: 0, 

      tick: { 
       format: d3.format("%") 
      } 
     } 
    } 
}); 

http://jsfiddle.net/697p6hw5/6/