chart.jsで円グラフ・棒グラフなど作成

javascriptで簡単に円グラフ、棒グラフなどが作成できます。
データを用意してjavascript内の変数に数値を入れるだけ。
スマホ表示にも自動対応してくれてとても便利です。

棒グラフ作成

ソースコード

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
    <script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-colorschemes/releases/download/v0.2.0/chartjs-plugin-colorschemes.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels"></script>
</head>

<canvas id="myBar2Chart"></canvas>

  <script>
var ctx = document.getElementById("myBar2Chart");
var myBar2Chart = new Chart(ctx, {
  //グラフの種類
  type: 'bar',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["自民", "立憲", "維新", "公明", "国民", "共産", "れいわ", "社民", "無所属"],
      //データセット
      datasets: [
          {
              //凡例
              label: "",
              //グラフのデータ
              data: [261,96,41,32,11,10,3,1,10]
          },
      ]
  },

  //オプションの設定
  options: {
      //軸の設定
      scales: {
          //縦軸の設定
          yAxes: [{
              //目盛りの設定
              ticks: {
                  //開始値を0にする
                  beginAtZero:true,
              }
          }]
      },
      //ホバーの設定
      hover: {mode: null},
  }
});
  </script>

円グラフ作成

ソースコード

<canvas id="myDoughnutChart" width="400" height="400"></canvas>
<script>
//円グラフ（ドーナッツ型）
var ctx = document.getElementById("myDoughnutChart");
var myDoughnutChart = new Chart(ctx, {
  //グラフの種類
  type: 'pie',
  //データの設定
  data: {
      //データ項目のラベル
      labels: ["自民", "立憲", "維新", "公明", "国民", "共産", "れいわ", "社民", "無所属"],
      //データセット
      datasets: [{
          //グラフのデータ
          data: [261,96,41,32,11,10,3,1,10]
      }]
  },options: {
    hover: {mode: null},
      //アニメーションの設定
      animation: {
          //アニメーションの有無
          animateRotate: false
      }
  }

});
</script>

⇒棒グラフ・円グラフの活用事例「2021年衆議院選挙結果」

グラフの中に数値やパーセントを記入

gitからプラグインをダウンロードする。
https://github.com/emn178/chartjs-plugin-labels

タグを入力するとグラフにパーセントが表示される。

<script src="./js/chartjs-plugin-labels.js"></script>

パーセンテージで表示する。

      
plugins: {
        labels: {
          render: 'percentage',
          fontColor: 'white',
          fontSize: 20
        }
      }

renderの部分を変更することで色々と変えられる。

label（ラベル）
percentage（パーセント）
value（数値）
image （画像）