我刚开始使用 cal-heatmap创建类似 Github 的日历(例如,一年中每一天的热图)。理想情况下,我希望它看起来像这样:
不幸的是,通过我的设置,我不断得到更像这样的东西:
当前的问题是月份之间的空格,例如中间有白色方 block 。我认为问题将出在与 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
});
这会让你得到这样的东西:
没有月份标签,也没有星期几标签。
最佳答案
我发现在 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");
};
铌。如果标签被其父容器剪裁,请在 .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/