目标
编写类似GitHub上的栅格图(热点图/Contribution活跃图)
效果图如下:
官网
用到的js插件Cal-HeatMap,他的GitHub地址。
代码
引入依赖(cdn方式)
<script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/cal-heatmap/3.3.10/cal-heatmap.css" />
html代码(用到bootstrap)
<div class="col-md-5">
<div class="col-md-12">
<p class="text-muted">用户日常活动图</p>
<hr/>
</div>
<div id="cal-heatmap" class="col-md-12"></div>
<div class="col-md-12">
<label class="label label-default" id="previousSelector-a-previous">上一年</label>
<label class="label label-default" id="previousSelector-a-next">后一年</label>
</div>
</div>
js代码
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
var cal = new CalHeatMap();
cal.init({
domain: "year",
subDomain: "day",
cellRadius: 3,
previousSelector: "#previousSelector-a-previous",
nextSelector: "#previousSelector-a-next",
tooltip: true,
onTooltip: function(date, nb) {
return $filter('currency')(nb || 0, '€ ', 2);
},
rowLimit: 10,
range: 1,
legendHorizontalPosition: "right",
label: {
width: 46,
position: "right",
offset: {x: 0, y: 110}
},
subDomainTitleFormat: {
empty: '休养生息<br/>{date}',
filled: "{count} {name} {date}"
},
domainLabelFormat: "%Y年",
itemNam