好きなときに好きなことをしたいブログ

好きなときに好きなことをしたい性格です。

C3.jsで積み上げ横棒グラフ(帯グラフ)を描く(サンプル①)

<div id="chart"></div>
var data = [{
    "name": "Class",
       A: 5, B: 20, C: 25, D: 20, E: 30,
}, {
    "name": "Level",
        S: 50000, A: 20000, B1: 50000, B2: 20000,C: 50000,
}]

var group = ["A","B","C","D","E","S","A","B1","B2","C" ]
var chart = c3.generate({
    bindto: '#chart',
    data: {
        json: data, // specify that our above json is the data       
        keys: {
            x: 'name', // specify that the "name" key is the x value
            value: group // specify that the "age" key is the y value
        },
        type: 'bar', // specfify type of plot
        order: null,
        groups: [ group ],
        axes: {
            A: 'y2',
            B: 'y2',
            C: 'y2',
            D: 'y2',
            E: 'y2',
            S: 'y',
            A: 'y',
            B1: 'y',
            B2: 'y',
            C: 'y'
        }
    },
    color: { pattern: ['#f00', '#ffa500', '#ff0', '#b0c4de', '#00ced1'] }, // チャートの色
    axis: {
        rotated: true, // horizontal bar chart
        x: {
            type: 'category', // this needed to load string x value
            show: false
        },
        y2:{
          max: 100, // 軸の最大値を指定
          //tick: { values: [] }, // y2軸の値を非表示
          show: false // y軸の軸線を非表示
        },
        y:{
          //tick: { values: [] }, // y軸の値を非表示
          show: true // y軸の軸線を表示
        }
    },
    legend: { show: false } // 凡例を非表示
});