如何将标签添加到 cal-heatmap 中的子域？

Question

我有一个显示上周数据的校准热图。每行是一天，每一列是一个小时。我有日期标签，但没有时间标签。我怎样才能添加这些？

var cal = new CalHeatMap();
    cal.init({
        itemSelector: "#cal-heatmap",
        domain: "day",
        subDomain: "hour",
        rowLimit: 1,
        domainGutter: 0,
        data: data,
        start: new Date(_.keys(data)[0] * 1000),
        cellSize: 15,
        cellPadding: 5,
        cellRadius: 3,
        range: 7,
        verticalOrientation: true,
        displayLegend: false,
        label: {
            position: "left",
            offset: {
                x: 20,
                y: 12
            },
            width: 110
        },
        legend: [40, 80, 120, 160, 200, 240, 280, 320],
        legendColors: ["#f9eb49", "#d66938"]
    });

Answer 1

根据作者的说法，这还不可能，所以我想出了一个看起来不错的解决方法。我刚刚在我的主校准热图上方制作了另一个 div，它显示了一个带有空标签的单行，以便它与下面的 table 对齐。然后我用下面的代码填充它：

var labels = new CalHeatMap();
    labels.init({
        itemSelector: "#cal-heatmap-labels",
        domain: "day",
        subDomain: "hour",
        rowLimit: 1,
        domainGutter: 0,
        data: {},
        cellSize: 15,
        cellPadding: 5,
        cellRadius: 3,
        range: 1,
        verticalOrientation: true,
        displayLegend: false,
        tooltip: true,
        subDomainTextFormat: "%-I",
        subDomainDateFormat: "%-I%p",
        domainLabelFormat: "",
        label: {
            position: "left",
            offset: {
                x: 20,
                y: 12
            },
            width: 110
        }
    });

这对我有用，看起来还不错。希望至少在开发此功能之前这对某人有所帮助。

如何将标签添加到 cal-heatmap 中的子域？

How do I add labels to a subdomain in cal-heatmap?

javascript

cal-heatmap