概要
ボタンで前後するのは大変なのでマイスホイールで前後できるようにしてみました
環境
- macOS 14.0
- nginx 1.25.2
- cal-heatmap 4.2.3
サンプルコード
<!DOCTYPE html>
<html>
<head>
<title>cal-heatmap v4</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/cal-heatmap/dist/plugins/Tooltip.min.js"></script>
<script src="https://unpkg.com/cal-heatmap/dist/plugins/Legend.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/cal-heatmap/dist/cal-heatmap.css">
<style>
.heatmap {
width: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<h1>Test</h1>
<div>
<div class="heatmap">
<div id="cal-heatmap"></div>
</div>
<div>
<button type="button" onclick="pre()">pre</button>
<button type="button" onclick="next()">next</button>
</div>
</div>
<script>
const cal = new CalHeatmap();
const data = [
{ date: '2023-10-18', value: 300 },
{ date: '2023-10-20', value: 600 },
{ date: '2023-11-01', value: 100 },
{ date: '2023-11-08', value: 200 },
{ date: '2023-11-15', value: 300 },
];
cal.paint({
data: {
source: data,
x: 'date',
y: 'value',
defaultValue: 0,
},
domain: { type: 'month' },
subDomain: { type: 'day' },
range: 40,
date: {
locale: 'ja',
timezone: 'Asia/Tokyo',
start: new Date(2023, 9, 1)
},
}, [[Tooltip, { enabled: true }], [Legend, { enabled: true, width: 1000 }]]);
function pre(e) {
cal.previous();
};
function next(e) {
cal.next();
};
var calDiv = document.getElementById("cal-heatmap");
calDiv.addEventListener("wheel",function(e) {
e.preventDefault();
if (event.deltaY < 0) {
next(e);
} else if (event.deltaY > 0) {
pre(e);
}
});
</script>
</body>
</html>
ちょっと解説
追加したのは addEventListener の部分です
wheel イベントを div に追加してマウスが上の場合は cal.next で下の場合は cal.previous をコールしています
イベントの直後で e.preventDefault() しないと画面ごとスクロールしてしまうので必須です
デモ
最後に
まだネット上にはない情報かなと思うので役に立てば幸いです
0 件のコメント:
コメントを投稿