単一系列の棒グラフを例にして代表的な設定機能を示します。
必要最小限の設定しかしない場合、次の記述で右上図が得られます。
これではあまりにも素っ気ないので、逆に多様な設定をした例を示します。
下のソースコードで、右下のグラフが描かれます。通常はこの程度の機能で十分でしょう。
複数の系列を並べた棒グラフの場合は、次のように datasets に並べるだけです。
datasets: [
{
label: "系列A", // 系列名
data: [10, 20, 5, 15, 10], // 系列Aのデータ
backgroundColor: "red" // 系列Aの棒の色
},
{ // ┐
label: "系列B", // │
data: [ 5, 10, 10, 5, 8], // │系列を増やす
backgroundColor: "blue" // │
} // ┘
]
右図のような積上げ棒グラフにするには、options で、xAxesとyAxesの双方に stacked: true を指定します。
個々の棒の色を変えるには、次のように backgroundColor を配列で与えます。
ここでは、棒の枠線はすべて同一であるとしてスカラで与えましたが、個別に指定するときには配列で与えます。そのとき、borderWidthが0の棒は枠線なしになります。また、枠の指定個数が少ない場合、指定個数の棒だけを指定したことになります。
label: "系列A",
data: [10, 20, 5, 15, 10],
backgroundColor: ["red", "yellow", "green", "blue", "purple"] // 個々の棒の色
borderColor: "black", // 棒の枠線
borderWidth: 2 // 枠線の太さ
右図のような水平の棒グラフにするには type を bar ではなく、horizontalBar にするだけでよいのです。しかし、垂直棒グラフでX軸、Y軸に関して設定を、Y軸、X軸に変更する必要があります。
右図では、発生順に上から下へ並んでいますが、場合によっては下から上に並べ(最新のデータが最上行になる)たいことがあります。それには、Y軸の設定で reverse: true とするらしいのですが、うまくいきません。
帯グラフは、積上げ棒グラフを横にしたもので、type を horizontalBar にするだけでよいのですが、全体を1あるいは100として、比率表示をする用途が多いようです。datasets では次のようにデータを記述することになります。
datasets: [ { label: "賛成", data: [100, 50] }, // 質問A, 質問Bへの回答者数 { label: "中間", data: [200, 20] }, { label: "中間", data: [ 50, 20] } ]
比率表示の用途には、[100, 50]のような人数ではなく、それぞれの全回答者(350と90)で割った比率を記述する必要があります。また。実際には、質問A = [100, 200, 50], 質問B = [50, 20, 20] で持つのが通常でしょう。
これらの変換計算を Chart.js 内部で行うのは無理があります。それでこれらの処理は外部で行うのが適切です。