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

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

C3.jsで複合グラフを描く(サンプル)

例えば、jsファイルはこんな感じ。

var data = {
  x_A:['0101','0102','0103','0104','0105','0106','0107','0108','0109','0110','0111','0112'],
  x_Z:['0101','0102','0103','0104','0105','0106','0107','0108','0109','0110','0111','0112','0213','0313','0413'],
  y_A:[20,25,11,33,7,38,6,35,8,31,12,24],
  y_Z:[6,35,8,31,12,24,25,11,33,7,38,150,218,38,104]
}

var chart = c3.generate({
    bindto: '#chart',
    data: {
        json: data,            // specify that our above json is the data    
        xs: {
            y_A: 'x_A',
            y_Z: 'x_Z'
        },
        xFormat: '%m%d',
        types: {
            y_A: 'scatter', y_Z: 'spline'
        },            // specfify type of plot
    },
    // 軸
    axis: {
        x: {
            type: 'timeseries',   // this needed to load string x value
            label: 'x軸',
            tick: {
                format: '%m/%d',
                rotate: 90 // 90度回転
            }
        },
        y: {label: 'y軸'}
    },
    // グリッド
    grid: {
        x: {
            show: true,
            lines: [
                {value: '0113', text: '黒のx軸グリッド線', class: 'nowPosition'}
            ]
        },
        y: {
            show: true,
            lines: [
                {value: 120, text: '赤のy軸グリッド線', class: 'signalRed'},
                {value:  80, text: '普通のy軸グリッド線'},
                {value:  50, text: '普通のy軸グリッド線'}
            ]
        }
    },
    // ズーム
    zoom: {
        enabled: true
    }
});

cssファイルはこんな感じ。

.c3-xgrid-line.nowPosition line {
    stroke: black;
}
.c3-xgrid-line.nowPosition text {
    fill: black;
}
.c3-ygrid-line.signalRed line {
    stroke: red;
}
.c3-ygrid-line.signalRed text {
    fill: red;
}

C3.jsで面階段グラフを描く(サンプル)

jsファイルは下記の通り

var rank = ['A', 'B', 'C', 'D']
var data = {
  name: ['I', 'You', 'He', 'She'],
  A: [10, 11, 14, 19], B: [20, 22, 26, 32], C: [30, 28, 24, 18], D: [40, 39, 36, 31]
}

var chart = c3.generate({
    bindto: '#chart',
    data: {
        //mimeType: 'json', // データを外部からファイルを取り込む場合、取り込みファイルのタイプを指定する
        json: data,
        x: 'name', 
        type: 'area-step', // グラフ種別:階段面グラフ
        // 'line', 'spline', 'step', 'area', 'area-spline', 'area-step' are also available to stack
        groups: [ rank ], // 積み上げるデータのグルーピング
        order: null // ソート順:データの定義順
    },
    /* 軸 */
    axis: {
        x: {
            type: 'category', // this needed to load string x value
            tick: {
              //centered: true,
              outer: false // 外側ティック非表示
            }
        },
        y: { max: 100, padding:0, show: false }
    },
    /* 凡例 */
    legend: { show: false }, // 非表示
    /* グラフ描画面積 */
    size: { width: 512, height: 100 },
    /* インタラクション(showing/hiding tooltip, selection, mouse events, etc) */
    interaction: {
        enabled: true
    },
    /* ズーム */
    zoom: {
        enabled: true
    }
});

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 } // 凡例を非表示
});

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 } // 凡例を非表示
});

C3.jsで積み上げ横棒グラフ(帯グラフ)を描く

 

全体的にお世話になったサイト

jsfiddle.net

グラフの縦横を入れ替える

axis: {rotated: false}

上の行を入れておくと、縦棒グラフが横棒グラフになる。

ページ内での表示位置

「bindto:」で指定。
【JavaScript】C3.js 〜 基本文法 / 構文編 〜 ( ソフトウェア ) - プログラム の個人的なメモ - Yahoo!ブログより)

ソート順

「order:」で指定。
降順とか昇順ではなく、こちらで指定した順序にしたい場合、
データ定義をその順番で記述しておき、orderにはnullを指定する。
c3.jsの円グラフで表示順を指定する - Qiitaより)

軸の値を非表示にする

tick: { values: [] }, // 軸の値を非表示
簡単にリッチなチャートが作れるC3.jsを使ってみた - undefinedより)

軸線と軸の値の両方を非表示にする

show: false
(参考文献なし。自力で解決)

凡例を非表示にする

legend: { show: false }
ビジュアライズ忘年会(C3.jsで大きな文字を表示してみた) - Qiitaより)

チャートの色を指定する

color: { pattern: ['#カラーコード', '#カラーコード', … , '#カラーコード'] }
簡単にリッチなチャートが作れるC3.jsを使ってみた - undefinedより)

チャートの全体の大きさを指定する

size: { width: 数字, height: 数字}
簡単にリッチなチャートが作れるC3.jsを使ってみた - undefinedより)

サンプルソース

anything.hatenadiary.com

anything.hatenadiary.com