Chart.jsによる棒グラフ作成<Chart.js<Javascript<木暮仁

スタートページJavascriptChart.js

Chart.jsによる棒グラフ作成


棒グラフ

棒グラフの単純設定


単一系列の棒グラフを例にして代表的な設定機能を示します。
必要最小限の設定しかしない場合、次の記述で右上図が得られます。


多様な設定

これではあまりにも素っ気ないので、逆に多様な設定をした例を示します。
下のソースコードで、右下のグラフが描かれます。通常はこの程度の機能で十分でしょう。


棒グラフの形態

複系列棒グラフ

複数の系列を並べた棒グラフの場合は、次のように 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: horizontalBar)

水平棒グラフ

右図のような水平の棒グラフにするには 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 内部で行うのは無理があります。それでこれらの処理は外部で行うのが適切です。