No mês passado, criei alguns arquivos HTML que possuem mapas de calor do Highcharts, os arquivos estavam funcionando bem e consegui ver os mapas ao abrir meus arquivos HTML em um navegador. No entanto, hoje eu abri meus arquivos HTML e só consigo ver o eixo e a legenda, os dados não são exibidos, embora quando eu passar a área do mapa com o mouse eu possa ver um pop-up que tem o valor de dados. Qual poderia ser o problema?
Abaixo está o código HTML. No entanto, o código não deve ter nenhum problema porque, como mencionei antes, foi testado há um mês.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script><scriptsrc="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script><scriptsrc="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script><divid="container" style="height: 320px; width: 1000px; margin: 0 auto"></div>
<!-- Source: http://vikjavev.no/ver/highcharts-demos/heatmap.csv.php?year=2013 -->
<pre id="csv" style="display: none">Date,Time,Temperature
2013-1-1,7,0.0033
2013-1-1,8,0.1885
2013-1-1,9,0.2871
2013-1-1,10,0.3043
2013-1-1,11,0.2766
2013-1-1,12,0.2448
</pre>
<script>
$(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 Series = H.Series,
each = H.each;
/**
* Create a hidden canvas to draw the graph on. The contents is later copied over
* to an SVG image element.
*/
Series.prototype.getContext = function () {
if (!this.canvas) {
this.canvas = document.createElement('canvas');
this.canvas.setAttribute('width', this.chart.chartWidth);
this.canvas.setAttribute('height', this.chart.chartHeight);
this.image = this.chart.renderer.image('', 0, 0, this.chart.chartWidth, this.chart.chartHeight).add(this.group);
this.ctx = this.canvas.getContext('2d');
}
return this.ctx;
};
/**
* Draw the canvas image inside an SVG image
*/
Series.prototype.canvasToSVG = function () {
this.image.attr({ href: this.canvas.toDataURL('image/png') });
};
/**
* 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 () {
var ctx = this.getContext();
if (ctx) {
// draw the columns
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);
}
});
this.canvasToSVG();
} else {
this.chart.showLoading('Your browser doesnt 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.
// arguments[0].call(this);
}
});
H.seriesTypes.heatmap.prototype.directTouch = false; // Use k-d-tree
}(Highcharts));
var start;
$('#container').highcharts({
credits: {
enabled: false
},
data: {
csv: document.getElementById('csv').innerHTML,
parsed: function () {
start = +new Date();
}
},
chart: {
type: 'heatmap',
margin: [60, 10, 80, 50]
},
title: {
text: '',
align: 'left',
x: 40
},
subtitle: {
text: '',
align: 'left',
x: 40
},
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
},
yAxis: {
title: {
text: null
},
labels: {
format: '{value}:00'
},
minPadding: 0,
maxPadding: 0,
startOnTick: false,
endOnTick: false,
tickPositions: [6, 8, 10, 12, 14,16],
tickWidth: 1,
min: 6,
max: 18,
reversed: true
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.2, '#fffbbc'],
[0.6, '#d67d74'],
[0.8, '#c4463a'],
[1, '#c4463a']
],
min: .2,
max: .8,
startOnTick: false,
endOnTick: false,
labels: {
format: '{value}'
}
},
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
}]
});
console.log('Rendered in ' + (new Date() - start) + ' ms'); // eslint-disable-line no-console
});
</script>
</body>
</html>
Eu descobri o problema. Foi causado pela última atualização do Highcharts para a versão 5.0.0. O problema ocorre quando tento envolver a função drawPoints () do heatmap.prototype, precisamente na linha 55 ( link ). Eu mudei de:
ctx.fillStyle = point.pointAttr[''].fill;
Para
ctx.fillStyle = point.color;
Tags javascript html