More than 5 years have passed since last update.

Chart.jsで線グラフで縦棒を書く方法

Last updated at 2019-11-09Posted at 2018-12-20

index.html

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>chartjs-plugin-annotation sandbox</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.min.js'></script>
<script src='https://cdn.rawgit.com/chartjs/Chart.js/master/samples/utils.js'></script>  
</head>

<body>


  <div style="width: 75%">
    <canvas id="canvas"></canvas>
  </div>


  

<script>
var chartData = {
  labels: ["11月30日 12:00", 
    "11月30日 15:00", 
    "12月1日 00:00", 
    "12月1日 03:00", 
    "12月1日 06:00", 
    "12月1日 09:00", 
    "12月1日 12:00", 
    "12月1日 15:00", 
    "12月1日 18:00", 
    "12月1日 21:00", 
    "12月2日 00:00", 
    "12月2日 03:00"],
  datasets: [
    {
      data: [1008, 1008, 1004, 1006, 1004, 1002, 996, 992, 990, 975, 970, 955]
    }
  ]
};

var options = {
      annotation: {
        annotations: [
          {
            type: "line",
            mode: "vertical",
            scaleID: "x-axis-0",
            value: "11月30日 15:00",
            borderColor: "blue",
            label: {
              content: "1008",
              enabled: true,
              position: "top"
            }
          }
        ]
      }
    };

function main()
{
  var ctx = document.getElementById("canvas").getContext("2d");
  new Chart(ctx, {
    type: "line",
    data: chartData,
    options: options,
  });
}
main();
</script>



</body>

</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up