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

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

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

<div class="chart"></div>
<div class="chart2"></div>
var data = [{"name": "Class", A: 5, B: 20, C: 25, D: 20, E: 30}]
var group = ["A","B","C","D","E"]
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: 'y',
            B: 'y',
            C: 'y',
            D: 'y',
            E: 'y'
        }
    },
    size: { width: 160, height: 80},
    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
        },
        y:{
          max: 100, // 軸の最大値を指定
          //tick: { values: [] }, // y軸の値を非表示
          show: false
        }
    },
    legend: { show: false } // 凡例を非表示
});

var data2 = [{"name": "Class", A: 10, B: 15, C: 20, D: 35, E: 20}]
var chart = c3.generate({
    bindto: '.chart2',
    data: {
        json: data2,            // 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: 'y',
            B: 'y',
            C: 'y',
            D: 'y',
            E: 'y'
        }
    },
    size: { width: 160, height: 80},
    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
        },
        y:{
          max: 100, // 軸の最大値を指定
          //tick: { values: [] }, // y軸の値を非表示
          show: false
        }
    },
    legend: { show: false } // 凡例を非表示
});