Highcharts mapa de calor
Este capítulo vamos apresentar Highcharts mapa de calor.
Na seção anterior nós já sabemos sintaxe de configuração Highcharts. Vamos olhar para os outros Highcharts configurações.
Mapa de calor
configuração do gráfico
Configurar o tipo de gráfico 'heatmap'. chart.type descreve o tipo de gráfico. O valor padrão é "linha".
var chart = {
type: 'heatmap'
};
Exemplos
O nome do arquivo: highcharts_heat_map.htm
<html>
<head>
<title>Highcharts 教程 | 本教程(w3big.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>
O exemplo acima saída é:
mapa de calor grandes quantidades de dados
Exemplos
O nome do arquivo: highcharts_heat_largemap.htm (exemplos de código-fonte completo, por favor clique para ler)
<html>
<head>
<title>Highcharts 教程 | 本教程(w3big.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>
O exemplo acima saída é: