如何制作像GitHub里那样的Heatmap热力图

发表于

github 上的 heatmap 热力图

avatar

这种热力图e-chart.js也可以做，但是功能比较单一，无法完全满足要求。这里我们使用 Cal-Heatmap

使用Cal-Heatmap 官网地址

注：翻译这篇文章时是2018-11-14，在日后看这篇文章时翻译中的版本可能有改变

开始

安装

经典的安装方式

  1. 下载最新版本的Cal-Heatmap到你的项目中

  2. 引入d3.js文件（使用最新的版本），或者下载到本地使用

    1
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>

  3. 通过引入js和css文件来安装 Cal-Heatmap

    1
    2
    <link rel="stylesheet" href="path/to/css/cal-heatmap.css" />
    <script type="text/javascript" src="path/to/cal-heatmap.min.js"></script>

使用 BOWER

1
bower install cal-heatmap

然后继续执行经典方法的第3步，将其安装到应用程序中

使用 JAM

1
jam install cal-heatmap

然后继续执行经典方法的第3步，将其安装到应用程序中

使用 CDN

仅需要在文件HEAD头部里引入以下文件

1
2
3
<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" />

基本使用

轻松愉快地创建你的第一个日历表吧

1
2
3
4
5
<div id="cal-heatmap"></div>
<script type="text/javascript">
	var cal = new CalHeatMap();
	cal.init({});
</script>

默认情况下，调用init()方法并传入一个空的对象作为参数，将会初始化一个12小时的空白日历，从当前时间（小时）开始计算，每个有60分钟。

浏览器支持

Cal-Heatmap 可在大多数支持 SVG 的现代浏览器中工作，在以下浏览器中通过了测试：

  • Internet Explorer 9+
  • Firefox 4+
  • Chrome 14+
  • Safari 5.0+
  • Opera 10+

我的备注

在Vue中使用 Cal-Heatmap

在要使用的组件中引用文件，或者全局引用

1
2
3
import '@/plugin/cal-heatmap/cal-heatmap.css'
import '@/plugin/cal-heatmap/d3.v3.js'
import '@/plugin/cal-heatmap/cal-heatmap.js'

后面的操作你懂得….

在vue中通过经典方法来使用Cal-Heatmap时没有成功

  1. 报错 Can't resolve 'd3' in XXX 。这个原因是因为cal-heatmap.js的第 9 行var d3 = typeof require === "function" ? require("d3") : window.d3; 和 d3.v3.js 的第 9270 行module.exports = d3; 共同造成的。
    因为vue是在 node 环境中，所以 require 和 module 都是存在的，但是我这里的module.exports是undefined，而 require 是要求返回一个 module 的，也是有通过module.exports返回，所以出现了错误。这里将cal-heatmap.js的第 9 行改为var d3 = window.d3;
  2. 在 vue 中引用d3.v3.js时，在 9272 行this.d3 = d3; 的 this 不是指向 window 而是 undefined，所以将 this 改为 window

为了满足按需引入这两个比较大的js文件，对cal-heatmap.js 引用 d3.v3.js 文件的方式进行改变

  1. 将d3.v3.js的第 1 行去掉，并且将 9267 ~ 9274 行去掉，然后添加一行export

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // !function() {
    	....
    	....
    	....
    // if (typeof define === "function" && define.amd) {
    //   define(d3);
    // } else if (typeof module === "object" && module.exports) {
    //   module.exports = d3;
    // } else {
    //   window.d3 = d3;
    // }
    // }();
    export default d3;

  2. 将cal-heatmap.js的第 9 行替换为import ...，并将 3475 ~ 3485 行去掉，添加export ...

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // var d3 = typeof require === "function" ? require("d3") : window.d3;
    import d3 from '@/plugin/cal-heatmap/d3.v3.js'
    ...
    ...
    ...
    // if (typeof define === "function" && define.amd) {
    // 	define(["d3"], function() {
    // 		"use strict";

    // 		return CalHeatMap;
    // 	});
    // } else if (typeof module === "object" && module.exports) {
    // 	module.exports = CalHeatMap;
    // } else {
    // 	window.CalHeatMap = CalHeatMap;
    // }
    export default CalHeatMap;

  3. 这样就不需要在组件里引用d3.v3.js文件了，而且没有将 d3 和 CalHeatMap 对象添加到 window 对象。