概要
機能としてはないので自分でそれっぽいのを作る必要があります
環境
- 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();
};
</script>
</body>
</html>
ちょっと解説
cal-heatmap v4 は svg でヒートマップを作成します
range が多い場合に svg がとても大きくなり親要素の div を無視して横に伸び続けてしまします
それを overflow: hidden; で隠します (実際には横に伸び続けています)
legend はなぜかレスポンシブに対応しておりどんだけ横に伸ばしても自動で短くなってくれるのでそのままで OK です
あとは画面がはみ出た文をボタンで移動できるようにすれば OK です
最後に
そのうち公式の機能としてヒートマップもレスポンシブに対応するかもしれません
0 件のコメント:
コメントを投稿