Question

我想使用C3图表库绘制规范化图表。

我目前的代码是

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没有图表设置本身可以解决这个问题

e.g。

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/

如何使用C3图表绘制Normalize Stack chart？

1 个答案: