如何使用Cal-Heatmap創建連續的Github-like日曆？

Question

我剛剛開始使用cal-heatmap來創建類似Github的日曆（例如，以塊爲單位的一年中的每一天的熱圖）。理想情況下，我想它看起來像這樣：

不幸的是，我的設置我不斷收到更多的東西一樣：

如果目前的問題是之間的空白幾個月，例如之間有白色塊。我認爲這個問題將會與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); 

我很確定這是可能的;我想問題是，如果可能與月/年域，以及我需要使用什麼設置來實現它。根據@ kamisama的說法，我已經儘可能地接近了我將要得到的結果。這裏是我的當前設置：

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

它可以幫助您這樣的：

有沒有一個月的標籤，也沒有一週標籤的一天。

Answer 1

如果您可以使用而不使用 cal-heatmap並直接使用D3，那麼D3的創建者有一個nice example of a custom heatmap calendar here。

它更像是一個手動解決方案，但在另一方面，它給你的自由，使之看起來完全如你所願。

Answer 2

我發現在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。如果標籤正被其父容器剪裁，請在.graph-domain上設置CSS overflow: visible，並將其寬度覆蓋爲較大的值。

對於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> 

我不知道這是否是最優雅的解決方案，但我希望它可以幫助別人。