More than 5 years have passed since last update.

Chart.jsで線グラフで縦棒をマウスホイールで動かす方法

Last updated at 2019-01-12Posted at 2018-12-21

Chart.js 2.7.xにはバグがあってchart.update()でアノテーションが再描画されません。
Chart.js 2.6.xに落とすと、正常に動作します。
（2018年12月21日現在）
https://github.com/chartjs/chartjs-plugin-annotation/issues/88

index.html

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

<head>
  <meta charset="UTF-8">
  <title>chartjs-plugin-annotation sandbox</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/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 g_value_index = 5;
var g_chart = null;
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 my_annotation = {
            type: "line",
            mode: "vertical",
            scaleID: "x-axis-0",
            value: chartData.labels[g_value_index],
            borderColor: "blue",
            label: {
              content: "1008",
              enabled: true,
              position: "top"
            }
          };
var options = {
	  animation: false,
      annotation: {
        annotations: [
          my_annotation,
        ]
      }
    };

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



function handler(e){
	if (e.originalEvent.deltaY < 0) {
		console.log("wheel up");
		g_value_index --;
		if ( g_value_index < 0 ) {
			g_value_index = 0;
		}
	} else {
		console.log("wheel down");
		g_value_index ++;
		if ( g_value_index > chartData.length - 1 ) {
			g_value_index = chartData.labels.length - 1;
		}
	}
	console.log("g_value_index="+g_value_index);
	my_annotation.value = chartData.labels[g_value_index];
	console.log("my_annotation.value="+my_annotation.value);
	options.annotation.annotations.shift();
	options.annotation.annotations.push(my_annotation);

	g_chart.update();
	e.preventDefault();
}
$("#canvas").off('wheel');
$("#canvas").on('wheel', handler);

</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