Question

我刚刚开始使用cal-heatmap来创建类似Github的日历（例如，一年中每一天的热图以块为单位）。理想情况下，我希望它看起来像这样：

Goal Heatmap

不幸的是，通过我的设置，我不断得到更多的东西：

Current Ugliness

当前问题是月份之间的空白，例如中间有白色的块。我认为问题是与domain，subdomain以及可能range和rowLimit的某些设置组合;但我不能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

没有月份标签，也没有星期几的标签。

Answer 1

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

因为这通常会显示每周的标签，要么将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");
        };

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

对于y轴Mon / Wed / Fri标签，只需将它们自己添加到图表的左侧或右侧，并使用适当的间距与单元格的大小对齐。

#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>

我不知道这是否是解决问题的最佳解决方案，但我希望它可以帮助某人。

Answer 2

有一个开放的API，可以根据日期以及相同的数据计数，数据日期和颜色等数据获取所有贡献。

您可以在以下位置访问它： https://0hrvuct456.execute-api.us-east-2.amazonaws.com/default/githubcalendar?username=shyamzzp

在此处替换shyamzzp的用户名。

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

3 个答案: