javascript - 如何使用 Cal-Heatmap 创建类似 Github 的连续日历?

标签 javascript jquery d3.js calendar heatmap

我刚开始使用 cal-heatmap创建类似 Github 的日历(例如,一年中每一天的热图)。理想情况下,我希望它看起来像这样:

Goal Heatmap

不幸的是,通过我的设置,我不断得到更像这样的东西:

Current Ugliness

当前的问题是月份之间的空格,例如中间有白色方 block 。我认为问题将出在与 domain 的某些设置组合上, subdomain ,可能还有 rangerowLimit ;但我不是 100% 确定该组合应该是什么。我已经尝试了一些 - 这是我当前的设置:

    (function($) {
        $(document).ready(function() {

            var cal = new CalHeatMap();
            cal.init({
                start: new Date(2013, 0), // January 1, 2013
                maxDate: new Date(),
                range: 12,
                rowLimit: 7,
                domain: "month",
                subDomain: "day",
                data: "/api/users/1/annotations/",
                cellSize: 12
            });

        });
    })(jQuery);

我很确定这是可能的;我想问题是月/年域是否可行,以及我需要使用哪些设置来实现它。

编辑 2014 年 1 月 27 日: 好吧,根据@kamisama 的说法,我已经很接近了。这是我当前的设置:

    cal.init({
        start: oneYearAgo(),
        maxDate: new Date(),
        range: 1,
        rowLimit: 7,
        domain: "year",
        subDomain: "day",
        data: "/api/users/1/annotations/",
        cellSize: 10.5
    });

这会让你得到这样的东西:

Not great, but good enough I guess

没有月份标签,也没有星期几标签。

最佳答案

我发现在 cal-heatmap 中近似 Github 提交图的最佳解决方案是使用 Week 域而不是 Month。

enter image description here

因为这通常会显示每周的标签,所以要么设置 domainLabelFormat为空字符串(不显示标签)或将其设置为仅显示(例如)每个月第一周的标签的函数。

var currentMonth = settings.start;
settings.domainLabelFormat = function (date) { //x-axis labels
            var md = moment(date);
            //only show the label for the first domain of the month
            if (md.month() == currentMonth)
                return "";

            //reset the current month
            currentMonth = md.month();
            //return the label
            return md.format("MMM");
        };

铌。如果标签被其父容器剪裁,请在 .graph-domain 上设置 CSS overflow: visible 并将其宽度覆盖为更大的值。

对于 y 轴的周一/周三/周五标签,只需将它们自己添加到图表的左侧或右侧,并以适当的间距与单元格的大小对齐。

#cal-heatmap-yaxislabels {
    float: left;
}
#cal-heatmap-yaxislabels > * {
    margin-top: 16px;
    display: block;
}

<div id="cal-heatmap-yaxislabels">
     <div class="graph-label">Mon</div>
     <div class="graph-label">Wed</div>
     <div class="graph-label">Fri</div>
</div>

我不知道这是否是解决问题的最优雅的解决方案,但我希望它能帮助别人。

关于javascript - 如何使用 Cal-Heatmap 创建类似 Github 的连续日历?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21119559/

相关文章:

javascript - 有效搜索较大字符串中的多个子字符串之一

javascript - 如何在 Javascript 和 D3.js 折线图中通过 stomp.js 绘制来自 Web 套接字消息的实时数据?

javascript - D3 : Loading multiple CSV files, 并使用平行坐标可视化它们

javascript - 替换元素内的文本

javascript - 如何检查与显示相关的文本内容 :none style

javascript - 在 JavaScript/jQuery 而不是 jQuery UI 中匹配具有相似 ID (#thumb-1 == #project-1) 的两个 div 的位置

javascript - 路径上的 d3.js 工具提示

c# - 在 RadWindows 中选择一个 RadGrid 行(客户端)

javascript - 用变量预填充 HTML 值?

javascript - jquery .html 显示 html 标签,而不是在文本上应用 html 标签