Как создать непрерывный календарь, подобный Github, с помощью Cal-Heatmap?
Я только начал использовать 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);
Я уверен, что это возможно; Я думаю, вопрос в том, возможно ли это с доменом month/year и какие настройки мне нужно использовать для его достижения.
Редактировать 27 января 2014 года: Ну, я подошел так близко, как кажется, я собираюсь получить, согласно @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]()
Нет ярлыков месяца и ни одного ярлыка недели недели.
Ответы
Ответ 1
Если вы можете работать без cal-heatmap и просто использовать D3 напрямую, там хороший пример настраиваемого календаря календарей здесь, прямо с создатель D3.
![enter image description here]()
Это скорее ручное решение, но, с другой стороны, оно дает вам свободу сделать его таким, каким вы хотите.
Ответ 2
Лучшим решением, которое я нашел, чтобы приблизиться к графу Github commit в cal-heatmap, является использование домена Week вместо месяца.
![введите описание изображения здесь]()
Так как это обычно показывает метку на каждую неделю, либо установите 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. если метки обрезаются их родительским контейнером, установите CSS overflow: visible
на .graph-domain
и переопределите его ширину на большее значение.
Для ярлыков Mon/Wed/Fri оси 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>
Я не знаю, является ли это самым элегантным решением проблемы, но я надеюсь, что это может помочь кому-то.