Cal-HeatMap（热点图）使用例子

目标

编写类似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