//値をグラフに表示させる
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 = 15; //フォントサイズ
          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: "bar", //グラフのタイプ
      data: {
        //グラフのデータ
        labels: [
          "孫悟空（25歳：界王拳3倍）",
          "ベジータ（地球襲撃時）",
          "孫悟空（25歳）"
        ], //データの名前
        datasets: [
          {
            label: "ドラゴンボールZ戦闘力", //グラフのタイトル
            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(54, 162, 235, 0.2)"
            ], //グラフの色
            borderColor: [
              "rgb(255, 99, 132)",
              "rgb(153, 102, 255)",
              "rgb(54, 162, 235)"
            ],
            borderWidth: 1,
            data: ["24000", "18000", "8000"] //横列に並ぶデータ
          }
        ]
      },
      options: {
        //グラフのオプション
        legend: {
          display: false //グラフの説明を非表示
        },
        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: {
          yAxes: [
            //グラフ縦軸（Y軸）設定
            {
              ticks: {
                beginAtZero: true, //0からスタート
                suggestedMax: 30000, //最大が1000
                suggestedMin: 0, //最小が0
                stepSize: 5000, //100づつ数値が刻まれる
                callback: function (value) {
                  return value;
                }
              }
            }
          ],
          xAxes: [
            //グラフ縦軸（X軸）設定
            {
              barPercentage: 0.5 //バーの太さ
            }
          ]
        }
      }
    });
  }
});