Chart.jsで線グラフで縦棒をマウスホイールで動かす方法
Chart.jsで線グラフで縦棒をマウスホイールで動かす方法:
Chart.js 2.7.xにはバグがあってchart.update()でアノテーションが再描画されません。
Chart.js 2.6.xに落とすと、正常に動作します。
（2018年12月21日現在）
Chart.js 2.7.xにはバグがあってchart.update()でアノテーションが再描画されません。
Chart.js 2.6.xに落とすと、正常に動作します。
（2018年12月21日現在）
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>
コメント
コメントを投稿