アウトプットするブログ

hoge

chart.jsというプラグインを使って折れ線グラフを作成していきます。

......
......
......

  <body>
    <canvas id="myLineChart"></canvas>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>

    <script>
      var ctx = document.getElementById("myLineChart");
      var myLineChart = new Chart(ctx, {
        type: "line",
        data: {
          labels: ["", "", "", "", "", "", ""],
          datasets: [
            {
              label: "",
              data: [35, 34, 37, 35, 34, 35, 34, 25],
              borderColor: "rgba(255,0,0,1)",
              backgroundColor: "rgba(0,0,0,0)"
            },
            {
              label: "",
              data: [25, 27, 27, 25, 26, 27, 25, 21],
              borderColor: "rgba(0,0,255,1)",
              backgroundColor: "rgba(0,0,0,0)"
            }
          ]
        },
        options: {
          title: {
            display: false
          },
          scales: {
            yAxes: [
              {
                ticks: {
                  suggestedMax: 40,
                  suggestedMin: 0
                }
              }
            ]
          }
        }
      });
    </script>
  </body>
</html>

ブログの投稿ログ

折れ線グラフを作成