面向工资编程,面向面试学习!

Highcharts 教程

Highcharts 教程Highcharts 环境配置Highcharts 配置语法Highcharts 曲线图Highcharts 基本曲线图Highcharts 带有数据标签曲线图表Highcharts 异步加载数据曲线图表Highcharts 时间序列,可缩放的图表Highcharts X 轴翻转曲线图Highcharts 带标记曲线图Highcharts 标示区曲线图Highcharts 时间间隔图表Highcharts 对数图表Highcharts 区域图Highcharts 基本区域图Highcharts 使用负数区域图Highcharts 堆叠区域图Highcharts 百分比堆叠区域图Highcharts 丢失值区域图Highcharts 反转x轴与y轴Highcharts 曲线区域图Highcharts 区间区域图Highcharts 使用区间和线的区域图Highcharts 条形图Highcharts 基本条形图Highcharts 堆叠条形图Highcharts 反向条形图Highcharts 柱形图Highcharts 基本柱形图Highcharts 使用负值的反向柱形图Highcharts 堆叠柱形图Highcharts 使用百分比的堆叠柱形图Highcharts 标签旋转柱形图Highcharts 堆叠组柱形图Highcharts 堆叠组柱形图Highcharts 固定布局柱形图Highcharts 使用 HTML 表格数据的柱形图Highcharts 区间柱形图Highcharts 饼图Highcharts 基本饼图Highcharts 配置选项详细说明Highcharts 显示图例饼图Highcharts 圆环图Highcharts 半圈圆环图Highcharts 向下钻取饼图Highcharts 渐变饼图Highcharts 单色饼图Highcharts 散点图Highcharts 气泡图Highcharts 动态图Highcharts 组合图Highcharts 柱形图,线条图,饼图组合Highcharts 双Y轴, 柱形图,线条图组合Highcharts 多Y轴组合Highcharts 散点图上添加回归线Highcharts 3D图Highcharts 3D柱形图Highcharts 带空值(null)和0的3D柱形图Highcharts 堆叠3D柱形图Highcharts 3D饼图Highcharts 3D圆环图Highcharts 测量图Highcharts 测量图Highcharts 圆形进度条式测量图Highcharts 时钟Highcharts 双轴车速表Highcharts 音量表(VU Meter)Highcharts 热点图Highcharts 树状图(Treemap)

Highcharts 热点图

本章节我们将为大家介绍 Highcharts 的热点图。

我们在前面的章节已经了解了 Highcharts 配置语法。接下来让我们来看下 Highcharts 的其他配置。


热点图

chart 配置

配置 chart 的 type 为 'heatmap' 。chart.type 描述了图表类型。默认值为 "line"。

var chart = {
   type: 'heatmap'
};

实例

文件名:highcharts_heat_map.htm

<html>
<head>
<title>Highcharts 教程 | 盘古教程(panku.pro)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="/try/demo_source/highcharts.js"></script>
   <script src="/try/demo_source/highcharts-more.js"></script>    
   <script src="http://code.highcharts.com/modules/heatmap.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<script language="JavaScript">
$(document).ready(function() {  
   var chart = {      
      type: 'heatmap',
      marginTop: 40,
      marginBottom: 80
   };
   var title = {
      text: '每星期每个员工的销售量'   
   };     

   var xAxis = {
      categories: ['Alexander', 'Marie', 'Maximilian', 'Sophia', 'Lukas', 'Maria', 'Leon', 'Anna', 'Tim', 'Laura']
   };
   
   var yAxis = {
      categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
      title: null
   };
   
   var colorAxis = {
      min: 0,
      minColor: '#FFFFFF',
      maxColor: Highcharts.getOptions().colors[0]
   };

   var legend = {
      align: 'right',
      layout: 'vertical',
      margin: 0,
      verticalAlign: 'top',
      y: 25,
      symbolHeight: 280
   };

   var tooltip = {
      formatter: function () {
         return '<b>' + this.series.xAxis.categories[this.point.x] + '</b> sold <br><b>' +
         this.point.value + '</b> items on <br><b>' + this.series.yAxis.categories[this.point.y] + '</b>';
      }
   };

   var series= [{
      name: 'Sales per employee',
      borderWidth: 1,
      data: [[0, 0, 10], [0, 1, 19], [0, 2, 8], [0, 3, 24], [0, 4, 67], [1, 0, 92], [1, 1, 58], [1, 2, 78], [1, 3, 117], [1, 4, 48], [2, 0, 35], [2, 1, 15], [2, 2, 123], [2, 3, 64], [2, 4, 52], [3, 0, 72], [3, 1, 132], [3, 2, 114], [3, 3, 19], [3, 4, 16], [4, 0, 38], [4, 1, 5], [4, 2, 8], [4, 3, 117], [4, 4, 115], [5, 0, 88], [5, 1, 32], [5, 2, 12], [5, 3, 6], [5, 4, 120], [6, 0, 13], [6, 1, 44], [6, 2, 88], [6, 3, 98], [6, 4, 96], [7, 0, 31], [7, 1, 1], [7, 2, 82], [7, 3, 32], [7, 4, 30], [8, 0, 85], [8, 1, 97], [8, 2, 123], [8, 3, 64], [8, 4, 84], [9, 0, 47], [9, 1, 114], [9, 2, 31], [9, 3, 48], [9, 4, 91]],
      dataLabels: {
         enabled: true,
         color: '#000000'
      }
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.title = title;       
   json.xAxis = xAxis; 
   json.yAxis = yAxis; 
   json.colorAxis = colorAxis; 
   json.legend = legend; 
   json.tooltip = tooltip; 
   json.series = series;       
   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

以上实例输出结果为:


大数据量热点图

实例

文件名:highcharts_heat_largemap.htm(完整源码请点击实例查看)

<html>
<head>
<title>Highcharts 教程 | 盘古教程(panku.pro)</title>
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   <script src="/try/demo_source/highcharts.js"></script>
   <script src="http://code.highcharts.com/modules/data.js"></script>    
   <script src="http://code.highcharts.com/modules/heatmap.js"></script>  
</head>
<body>
<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
<!-- 省略数据开始,详情请点击“尝试一下” -->
……
……
……
<!-- 省略数据结束,详情请点击“尝试一下” -->
<script language="JavaScript">
$(document).ready(function() {  

     /**
     * This plugin extends Highcharts in two ways:
     * - Use HTML5 canvas instead of SVG for rendering of the heatmap squares. Canvas
     *   outperforms SVG when it comes to thousands of single shapes.
     * - Add a K-D-tree to find the nearest point on mouse move. Since we no longer have SVG shapes
     *   to capture mouseovers, we need another way of detecting hover points for the tooltip.
     */
    (function (H) {
        var wrap = H.wrap,
            seriesTypes = H.seriesTypes;

        /**
         * Get the canvas context for a series
         */
        H.Series.prototype.getContext = function () {
            var canvas;
            if (!this.ctx) {
                canvas = document.createElement('canvas');
                canvas.setAttribute('width', this.chart.plotWidth);
                canvas.setAttribute('height', this.chart.plotHeight);
                canvas.style.position = 'absolute';
                canvas.style.left = this.group.translateX + 'px';
                canvas.style.top = this.group.translateY + 'px';
                canvas.style.zIndex = 0;
                canvas.style.cursor = 'crosshair';
                this.chart.container.appendChild(canvas);
                if (canvas.getContext) {
                    this.ctx = canvas.getContext('2d');
                }
            }
            return this.ctx;
        }

        /**
         * Wrap the drawPoints method to draw the points in canvas instead of the slower SVG,
         * that requires one shape each point.
         */
        H.wrap(H.seriesTypes.heatmap.prototype, 'drawPoints', function (proceed) {

            var ctx;
            if (this.chart.renderer.forExport) {
                // Run SVG shapes
                proceed.call(this);

            } else {

                if (ctx = this.getContext()) {

                    // draw the columns
                    H.each(this.points, function (point) {
                        var plotY = point.plotY,
                            shapeArgs;

                        if (plotY !== undefined && !isNaN(plotY) && point.y !== null) {
                            shapeArgs = point.shapeArgs;

                            ctx.fillStyle = point.pointAttr[''].fill;
                            ctx.fillRect(shapeArgs.x, shapeArgs.y, shapeArgs.width, shapeArgs.height);
                        }
                    });

                } else {
                    this.chart.showLoading("Your browser doesn't support HTML5 canvas, <br>please use a modern browser");

                    // Uncomment this to provide low-level (slow) support in oldIE. It will cause script errors on
                    // charts with more than a few thousand points.
                    //proceed.call(this);
                }
            }
        });
    }(Highcharts));
    
   var data = {
      csv: document.getElementById('csv').innerHTML,
      parsed: function () {
         start = +new Date();
      }
   };    
   var chart = {      
      type: 'heatmap',
      margin: [60, 10, 80, 50]
   };
   var title = {
      text: 'Highcharts extended heat map',
      align: 'left',
      x: 40      
   };     
   var subtitle = {
      text: 'Temperature variation by day and hour through 2013',
      align: 'left',
      x: 40
   };

   var xAxis = {
      type: 'datetime',
      min: Date.UTC(2013, 0, 1),
      max: Date.UTC(2014, 0, 1),
      labels: {
         align: 'left',
         x: 5,
         y: 14,
         format: '{value:%B}' // long month
      },
      showLastLabel: false,
      tickLength: 16
   };
   
   var yAxis = {
      title: {
         text: null
      },
      labels: {
         format: '{value}:00'
      },
      minPadding: 0,
      maxPadding: 0,
      startOnTick: false,
      endOnTick: false,
      tickPositions: [0, 6, 12, 18, 24],
      tickWidth: 1,
      min: 0,
      max: 23,
      reversed: true
   };
   
   var colorAxis = {
      stops: [
         [0, '#3060cf'],
         [0.5, '#fffbbc'],
         [0.9, '#c4463a'],
         [1, '#c4463a']
      ],
      min: -15,
      max: 25,
      startOnTick: false,
      endOnTick: false,
      labels: {
         format: '{value}?'
      }
   };  

   var series= [{
      borderWidth: 0,
      nullColor: '#EFEFEF',
      colsize: 24 * 36e5, // one day
      tooltip: {
         headerFormat: 'Temperature<br/>',
         pointFormat: '{point.x:%e %b, %Y} {point.y}:00: <b>{point.value} ?</b>'
      },
      turboThreshold: Number.MAX_VALUE // #3404, remove after 4.0.5 release
   }];     
      
   var json = {};   
   json.chart = chart; 
   json.data = data; 
   json.title = title;       
   json.xAxis = xAxis; 
   json.yAxis = yAxis; 
   json.colorAxis = colorAxis;    
   json.series = series;       
   
   $('#container').highcharts(json);
});
</script>
</body>
</html>

以上实例输出结果为: