概要
v4 になっていたのでマイグレーション方法も含めて確認のため試してみました
node は使わずブラウザのみで試します
環境
- macOS 14.0
- nginx 1.25.2
- cal-heatmap 4.2.3
Getting Started
- cd /opt/homebrew/var/www
- vim index.html
<!DOCTYPE html>
<html>
<head>
<title>cal-heatmap v4</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://unpkg.com/cal-heatmap/dist/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/cal-heatmap/dist/cal-heatmap.css">
</head>
<body>
<h1>Test</h1>
<div id="cal-heatmap"></div>
<script>
const cal = new CalHeatmap();
cal.paint({});
</script>
</body>
</html>
-
/opt/homebrew/opt/nginx/bin/nginx -g "daemon off;"
データを登録してみる
<!DOCTYPE html>
<html>
<head>
<title>cal-heatmap v4</title>
<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>
<link rel="stylesheet" href="https://unpkg.com/cal-heatmap/dist/cal-heatmap.css">
</head>
<body>
<h1>Test</h1>
<div id="cal-heatmap"></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: 20,
date: {
locale: 'ja',
timezone: 'Asia/Tokyo',
start: new Date(2023, 9, 1)
},
}, [[Tooltip, { enabled: true }]]);
</script>
</body>
</html>
ちょっと解説
data で x, y で必ずデータの日付のキーと値のキーを指定する必要があります
domain, subDomain を使って表示する単位を日毎にしています
locale と timeZone を指定しましょう、デフォルトは日本になっていません
range を指定すると表示する月の数を指定することができます
最後に
一番はまったのは data で必ず x, y を指定する点でした
次回は v3 からのマイグレーション時のポイントを紹介します
0 件のコメント:
コメントを投稿