JSONの記法
何となく分かるけど、自分で書いてって言われると少し困っちゃうのでちゃんと調べた。
文字列はシングルコーテーションではなく、ダブルコーテーションで囲むのが正しいのね。
今日読んだのは下記のサイトです。
JSON/ja - Free Pascal wiki
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で積み上げ横棒グラフ(帯グラフ)を描く
- 全体的にお世話になったサイト
- グラフの縦横を入れ替える
- ページ内での表示位置
- ソート順
- 軸の値を非表示にする
- 軸線と軸の値の両方を非表示にする
- 凡例を非表示にする
- チャートの色を指定する
- チャートの全体の大きさを指定する
- サンプルソース
全体的にお世話になったサイト
グラフの縦横を入れ替える
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より)
サンプルソース
Scrum開発にRedmineを使う場合
Scrum開発にRedmineを使う場合、こちらの記事が参考になりそうです。