Chart.jsを使って100%積み上げ棒グラフを作成する！

ゆみむ

2020年10月24日 15:40

こんにちは！Naohiroです。

今日はChart.jsというJavaScriptのチャートライブラリーを使って100％積み上げ縦棒を作成したいと思います！

綺麗に絵画できることで有名なので期待です！

公式ホームページ

https://www.chartjs.org/

完成予定図

こんな感じの図を目指していきます！！

方法を探る
よし！やってみよう！と思って1時間。。

調べても全然でてこねぇ

なんだこれ。本当にできるのか。

と、思ったら出てきました！！

githubでchart.jsのプラグインとして100％積み上げ棒を作っている人を発見！

この人のファイルをダウンロードします！

https://github.com/y-takey/chartjs-plugin-stacked100

解凍したのち、サンプルを発見したのでとりあえずこれ通りに配置してみます。

ファイル構成
とりあえずこんな感じで自分は置いてみました。

100%積み上げ縦棒----src----index.js

|--test---data_bar.html

以外とファイルの位置が重要だったりします。

コード

data_bar.html
<html lang="ja">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://npmcdn.com/chart.js@latest/dist/Chart.bundle.min.js"></script>
<script type="text/javascript" src="../src/index.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<header>
<h1>100%積み上げ縦棒</h1>

</header>

<main>
<div style="width: 1000px;">
<canvas id="my-chart-3"></canvas></div>
<script>
new Chart(document.getElementById("my-chart-3"), {
 type: "bar",
 data: {
   labels: ["6/1", "7/1", "8/1", "9/1", "10/1"],
   datasets: [
     { label: "1~10位", data: [10, 9, 20], backgroundColor: "rgba(244, 143, 177, 0.6)" },
     { label: "11~20位", data: [20, 6, 30], backgroundColor: "rgba(255, 235, 59, 0.6)" },
     { label: "21~30位", data: [30, 12, 40], backgroundColor: "rgba(100, 181, 246, 0.6)" },
     { label: "31~50位", data: [40, 8, 40], backgroundColor: "rgba(100, 93, 50, 0.6)" },
     { label: "51~100位", data: [60, 6, 60], backgroundColor: "rgba(100, 23, 88, 0.6)" }     
   ]
 },
 options: {
   plugins: {
     stacked100: { enable: true }
   },
   title: {                           //タイトル設定
               display: true,                 //表示設定
               text: '順位上昇達成率'                //ラベル
           },
   scales: {                          //軸設定
     xAxes: [{
               stacked: true
           }],
     yAxes: [{                      //y軸設定
                 stacked: true,
                   display: true,             //表示設定
                   scaleLabel: {              //軸ラベル設定
                      display: true,          //表示設定
                      fontSize: 18               //フォントサイズ
                   },
                   ticks: {                      //最大値最小値設定
                       min: 0,                   //最小値
                       max: 100,                  //最大値
                       fontSize: 18,             //フォントサイズ
                       stepSize: 20              //軸間隔
                   },
               }],
             },
   legend: {
     display: true,
   }
 }
});
</script>
</main>
</body>

こんな感じです。

サンプルを参考にしています。

解説

Chart.jsは<canvas>要素を使います。

ここの部分にidと呼応したグラフが絵画されます。

注目するところは

・stacked100をtrueにすること

・datasetsのデータの並び

くらいですかね。

headの部分のmeta要素、script要素が抜けたら100%積み上げにならなかったのでまた勉強して理由を探りたいなと思います！！

まとめ

グーグルさんで100%積み上げ棒をどうやって作るのかなかなかヒットしなかったのでとりあえずコードだけと思って今回の記事をあげました。

ばりばりの初心者なので原因が分かり次第追記したいなと思います！

それにしてもChart.js。

こんなに綺麗なグラフが描けるとは。

れのちゃんには負けるけどね。

ではでは。

この記事が気に入ったらサポートをしてみませんか？