Cal-Heatmap在GitHub Pages中无法按数据值显示颜色的问题

你的热力图不显示对应颜色主要有两个原因，修复方案如下：

1. 日期范围不匹配 #

代码中startDate取的是当前月份的第一天，搭配range:3会显示当前月及后续两个月，但你提供的数据是2025年3月、4月的日期，不在这个显示范围内，对应日期的格子根本没被渲染，自然看不到颜色。

你可以手动指定起始日期到包含数据的月份（注意JavaScript中月份从0开始，2代表3月）：

const startDate = new Date(2025, 2, 1);

2. 数据配置格式错误 #

Cal-Heatmap v4要求data配置为对象，需要明确指定数据源source、日期字段x和值字段y，不能直接传入数组。

修复后的完整代码 #

<meta charset="UTF-8">
<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>
<link rel="stylesheet" href="https://unpkg.com/cal-heatmap/dist/cal-heatmap.css">
<title>Monthly Activity</title>
</head>
<body>
<h1>Monthly Activity</h1>
<div id="cal-heatmap"></div>
<script type="module">
    const startDate = new Date(2025, 2, 1); 

    const cal = new CalHeatmap();
    cal.paint({
        itemSelector: "#cal-heatmap",
        date: { start: startDate },
        range: 3,
        domain: { type: "month", gutter: 10 },
        subDomain: { type: "xDay", label: 'DD'},
        data: {
            source: [
                { date: "2025-03-01", value: 1 },
                { date: "2025-03-02", value: 58 },
                { date: "2025-04-12", value: 400 }
            ],
            x: "date",
            y: "value"
        },
        scale: {
            color: { type: "linear", scheme: 'Cool', domain: [1, 500] }
        }
    });
</script>
</body>
</html>

修改后，3-5月的日历会被渲染，对应日期的格子会根据value值匹配Cool配色方案的颜色，值越大颜色越深。

内容的提问来源于stack exchange，提问作者user26400325