棒グラフ（横・複数バー）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.1.2/jquery.inview.min.js">
</script>
<style>@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

body {
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(
    76.5deg,
    rgba(129, 252, 255, 1) 0.4%,
    rgba(255, 175, 207, 1) 49.8%,
    rgba(255, 208, 153, 1) 98.6%
  );
}

h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 2rem;
  padding-top: 30px 0;
  color: #666;
}

.lead {
  padding: 20px;
  text-align: center;
}

a {
  color: #666;
  font-weight: bold;
}

.box {
  width: 80vw;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 10px 10px 5px -2px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
}

h2,
p {
  color: #666;
}</style>
</head>
<body>
<body>
<p class="lead">使用したライブラリ：<a href="https://www.chartjs.org/" target="_blank">https://www.chartjs.org/</a>
</p>
<div class="box">
<h2>ドラゴンボールZ 戦闘力(フリーザ編)</h2>
<canvas id="chart">
</canvas>
<!--/box-->
</div>
<script>//値をグラフに表示させる
Chart.plugins.register({
  afterDatasetsDraw: function (chart, easing) {
    var ctx = chart.ctx;
    chart.data.datasets.forEach(function (dataset, i) {
      var meta = chart.getDatasetMeta(i);
      if (!meta.hidden) {
        meta.data.forEach(function (element, index) {
          // 値の表示
          ctx.fillStyle = "rgb(0, 0, 0,0.8)"; //文字の色
          var fontSize = 12; //フォントサイズ
          var fontStyle = "normal"; //フォントスタイル
          var fontFamily = "Arial"; //フォントファミリー
          ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

          var dataString = dataset.data[index].toString();

          // 値の位置
          ctx.textAlign = "center"; //テキストを中央寄せ
          ctx.textBaseline = "middle"; //テキストベースラインの位置を中央揃え

          var padding = 5; //余白
          var position = element.tooltipPosition();
          ctx.fillText(
          dataString,
          position.x,
          position.y - fontSize / 2 - padding);

        });
      }
    });
  } });


//=========== 棒グラフ（縦） ============//

$("#chart").on("inview", function (event, isInView) {
  //画面上に入ったらグラフを描画
  if (isInView) {
    var ctx = document.getElementById("chart"); //グラフを描画したい場所のid
    var chart = new Chart(ctx, {
      type: "horizontalBar", //グラフのタイプ
      data: {
        //グラフのデータ
        labels: ["第一形態", "最終形態", "ベジータ死"], //データの名前
        datasets: [
        {
          label: "孫悟空",
          data: [6, 18, 300],
          backgroundColor: "rgba(255, 99, 132, 0.2)",
          borderColor: "rgb(255, 99, 132)" },

        {
          label: "フリーザ",
          data: [53, 240, 300],
          backgroundColor: "rgba(153, 102, 255, 0.2)",
          borderColor: "rgb(153, 102, 255)" },

        {
          label: "ベジータ",
          data: [7, 25, 250],
          backgroundColor: "rgba(54, 162, 235, 0.2)",
          borderColor: "rgb(54, 162, 235)" }] },



      options: {
        //グラフのオプション
        legend: {
          display: true //グラフの説明を非表示
        },
        tooltips: {
          //グラフへカーソルを合わせた際の詳細表示の設定
          callbacks: {
            label: function (tooltipItems, data) {
              if (tooltipItems.yLabel == "0") {
                return "";
              }
              return (
                data.datasets[tooltipItems.datasetIndex].label +
                "：" +
                tooltipItems.yLabel +
                "");

            } } },


        title: {
          //上部タイトル表示の設定
          display: true,
          fontSize: 10,
          text: "単位：不明" },

        scales: {
          xAxes: [
          //グラフ縦軸（X軸）設定
          {
            ticks: {
              beginAtZero: true, //0からスタート
              suggestedMax: 300, //最大が100
              suggestedMin: 0, //最小が0
              stepSize: 50, //10づつ数値が刻まれる
              callback: function (value) {
                return value + "万"; //数字＋%で表示
              } } }],



          yAxes: [
          //グラフ縦軸（Y軸）設定
          {
            barPercentage: 0.5 //バーの太さ
          }] } } });




  }
});
//# sourceURL=pen.js</script>
</body>
</html>

/* 
   外部依存 CSS:
     - https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
   外部依存 JS (このデモは下記の JS にも依存します):
     - https://code.jquery.com/jquery-3.4.1.min.js
     - https://cdnjs.cloudflare.com/Chart.min.js
     - https://cdnjs.cloudflare.com/jquery.inview.min.js
 */

@charset "utf-8";

/*========= レイアウトのためのCSS ===============*/

body {
  vertical-align: middle;
  text-align: center;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(
    76.5deg,
    rgba(129, 252, 255, 1) 0.4%,
    rgba(255, 175, 207, 1) 49.8%,
    rgba(255, 208, 153, 1) 98.6%
  );
}

h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 2rem;
  padding-top: 30px 0;
  color: #666;
}

.lead {
  padding: 20px;
  text-align: center;
}

a {
  color: #666;
  font-weight: bold;
}

.box {
  width: 80vw;
  margin: 50px auto;
  padding: 20px;
  text-align: center;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 10px 10px 5px -2px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
}

h2,
p {
  color: #666;
}

/* 
   外部依存 JS:
     - https://code.jquery.com/jquery-3.4.1.min.js
     - https://cdnjs.cloudflare.com/Chart.min.js
     - https://cdnjs.cloudflare.com/jquery.inview.min.js
   外部依存 CSS (このデモは下記の CSS にも依存します):
     - https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css
 */

//値をグラフに表示させる
Chart.plugins.register({
  afterDatasetsDraw: function (chart, easing) {
    var ctx = chart.ctx;
    chart.data.datasets.forEach(function (dataset, i) {
      var meta = chart.getDatasetMeta(i);
      if (!meta.hidden) {
        meta.data.forEach(function (element, index) {
          // 値の表示
          ctx.fillStyle = "rgb(0, 0, 0,0.8)"; //文字の色
          var fontSize = 12; //フォントサイズ
          var fontStyle = "normal"; //フォントスタイル
          var fontFamily = "Arial"; //フォントファミリー
          ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily);

          var dataString = dataset.data[index].toString();

          // 値の位置
          ctx.textAlign = "center"; //テキストを中央寄せ
          ctx.textBaseline = "middle"; //テキストベースラインの位置を中央揃え

          var padding = 5; //余白
          var position = element.tooltipPosition();
          ctx.fillText(
          dataString,
          position.x,
          position.y - fontSize / 2 - padding);

        });
      }
    });
  } });


//=========== 棒グラフ（縦） ============//

$("#chart").on("inview", function (event, isInView) {
  //画面上に入ったらグラフを描画
  if (isInView) {
    var ctx = document.getElementById("chart"); //グラフを描画したい場所のid
    var chart = new Chart(ctx, {
      type: "horizontalBar", //グラフのタイプ
      data: {
        //グラフのデータ
        labels: ["第一形態", "最終形態", "ベジータ死"], //データの名前
        datasets: [
        {
          label: "孫悟空",
          data: [6, 18, 300],
          backgroundColor: "rgba(255, 99, 132, 0.2)",
          borderColor: "rgb(255, 99, 132)" },

        {
          label: "フリーザ",
          data: [53, 240, 300],
          backgroundColor: "rgba(153, 102, 255, 0.2)",
          borderColor: "rgb(153, 102, 255)" },

        {
          label: "ベジータ",
          data: [7, 25, 250],
          backgroundColor: "rgba(54, 162, 235, 0.2)",
          borderColor: "rgb(54, 162, 235)" }] },



      options: {
        //グラフのオプション
        legend: {
          display: true //グラフの説明を非表示
        },
        tooltips: {
          //グラフへカーソルを合わせた際の詳細表示の設定
          callbacks: {
            label: function (tooltipItems, data) {
              if (tooltipItems.yLabel == "0") {
                return "";
              }
              return (
                data.datasets[tooltipItems.datasetIndex].label +
                "：" +
                tooltipItems.yLabel +
                "");

            } } },


        title: {
          //上部タイトル表示の設定
          display: true,
          fontSize: 10,
          text: "単位：不明" },

        scales: {
          xAxes: [
          //グラフ縦軸（X軸）設定
          {
            ticks: {
              beginAtZero: true, //0からスタート
              suggestedMax: 300, //最大が100
              suggestedMin: 0, //最小が0
              stepSize: 50, //10づつ数値が刻まれる
              callback: function (value) {
                return value + "万"; //数字＋%で表示
              } } }],



          yAxes: [
          //グラフ縦軸（Y軸）設定
          {
            barPercentage: 0.5 //バーの太さ
          }] } } });




  }
});
//# sourceURL=pen.js