Highcharts Mapa de calor
En este capítulo presentaremos el mapa de calor de Highcharts.
En los capítulos anteriores hemos visto la sintaxis de configuración de Highcharts. Ahora veamos otras configuraciones de Highcharts.
Mapa de calor
Configuración de chart
Configura el type del chart como 'heatmap'. chart.type describe el tipo de gráfico. El valor predeterminado es "line".
var chart = {
type: 'heatmap'
};
Ejemplo
Nombre de archivo: highcharts_heat_map.htm
<html>
<head>
<title>Highcharts 教程 | Ejemplo(example.com)</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>
El resultado del ejemplo anterior es:
Mapa de calor con grandes cantidades de datos
Ejemplo
Nombre de archivo: highcharts_heat_largemap.htm (haga clic en el ejemplo para ver el código fuente completo)
<html>
<head>
<title>Highcharts 教程 | Ejemplo(example.com)</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>
El resultado del ejemplo anterior es:
Otras extensiones