javascript - 如何向 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，它显示带有空标签的单行，以便它与下表对齐。然后我用下面的代码填充它:

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
        }
    });

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