Question

我有一个显示上周数据的cal-heatmap。每行是一天，每列是一小时。我有标签，但不是时间。我该如何添加这些？

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

根据作者的说法，这还不可能，所以我想出了一个看起来不错的解决方法。我刚刚在我的主cal-heatmap上面创建了另一个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
        }
    });

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

如何在cal-heatmap中为子域添加标签？

1 个答案: