关于各种图表的代码解析（一）热力图_highcharts热力图

界面的重要性
在前端的设计中，我们要接触的不仅仅是代码，更是要与不同的图表打交道。
事实上，不论你的代码有多简洁，或是有多复杂，最后展现在人们面前的更多的是前台的界面，如果你的前台界面非常的漂亮，即使你的代码写得非常一般，你的网站也能够成为众多网站中的佼佼者，因为，你的服务对象是用户，而大部分用户是不理解你的代码，除了一小部分程序猿突然心血来潮也许会点开鼠标右键查看一下你的源代码，毕竟他们不懂，也没必要去懂多么高端的代码，人都是视觉动物，古人说过“窈窕淑女，君子好逑”，同样，简洁大方的网站也是加分项。
而与图形界面连接最广的，非游戏莫属，不论是网页游戏，手机游戏，甚至是微信上最简单的小游戏，随便打开一个火的游戏，你就能发现，它一定是画面精美，配色也让人感觉很舒服。
在前一个暑假里，由于百无聊赖，我决定打开App Store下载一些游戏，恰好看到了一组极光奖的推送，于是我毫不犹豫的将它们全部下载了，当然，我还下载了其他小游戏。
但没过多久，我就有些腻了，因为这些小游戏虽然介绍说的十分美好，但你打开以后根本不是那个样子，感觉就像是喝了一口可乐却发现里面的二氧化碳全都跑了，十分失望。
于是我决定卸载一些游戏，在反复玩了十几个游戏以后，我经过仔细的比较以后，我手机上的游戏只剩下了四五个，总结了一下那些不好的游戏，要么是剧情无聊，要么是人物精美但游戏的元素一般，总之各有各的坏处，但是剩下来的游戏，却都是玩法简单却画面精美，比如纪念碑谷，


纪念碑谷的开场我记得很清楚，是不同的建筑，但纪念碑谷的元素却十分简单，无非是一个小女孩在不同的建筑物里穿梭，通过改变各种机关按钮到下一层建筑，听起来好像有点像密室逃脱，但是密室逃脱往往是黑暗的屋子，不知道在哪的证据，也许一盆小花上不同的颜色就是线索，如果纪念碑谷真的算是密室逃脱，那可真是极具创新了。
不过我个人认为，纪念碑谷和盗梦空间有点类似，利用了3D平面的转换，
也许这就叫做美的千篇一律，丑的各有不同。

关于图的结构
这里主要以Highcharts为例子来讲解图的结构
一般情况下，Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。
Highcharts 基本组成部分如下图所示

由图可以看出，影响一个图的主要因素是它的横坐标和纵坐标，以这个降雨图为例，它的主要框架是由x轴，y轴以及数据构成，而前端最主要的就是属性，我们需要把前端的每一个属性值组合起来，再组成一幅完整的图。
在平面图中，坐标轴Axis分为x,y轴，x轴表示为xAxis，y轴表示yAxis，那么让我们来了解一下xAxis和yAxis是由哪些属性构成吧。
笛卡尔图表（普通的二维数据图）都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。下图为图表中坐标轴组成部分

图1：图表坐标轴组成部分
一、坐标轴组成部分
1、坐标轴标题
坐标轴标题。默认情况下，x轴为null（也就是没有title），y轴为’Value’，设置坐标轴标题的代码如下：

xAxis:{
   title:{
       text:'x轴标题'
   }
}
yAxis:{
   title:{
       text:'y轴标题'
   }
}
1
2
3
4
5
6
7
8
9
10

更多关于Axis Title属性请查看API文档相关内容 xAxis.title、yAxis.title。

2、坐标轴刻度标签
坐标轴标签（分类）。Labels常用属性有enabled、formatter、step、staggerLines

1）enabled
是否启用Labels。x，y轴默认值都是true，如果想禁用（或不显示）Labels，设置该属性为false即可。

2）Formatter
标签格式化函数。默认实现是：

formatter:function(){
return this.value;
}
this.value代码坐标轴上当前点的值（也就是x轴当前点的x值，y轴上当前点的y值），除了value变量外，还有axis、chart、isFirst、isLast可用。例如调用this.isFirst的结果如下图所示

图2：自定义坐标轴标签格式化 1
另外一个例子，实现更高级的自定义格式化函数，截图如下：

图3：自定义坐标轴标签格式化 2
实现代码如下：

yAxis: {        
  labels: {
    formatter:function(){
      if(this.value<
1
2
3
4