Letzten Monat habe ich einige HTML-Dateien mit Highcharts-Heatmaps erstellt, die Dateien funktionierten einwandfrei und ich konnte die Karten beim Öffnen meiner HTML-Dateien in einem Browser sehen. Heute habe ich jedoch meine HTML-Dateien geöffnet und kann nur die Achse und die Legende sehen. Die Daten werden nicht angezeigt. Wenn ich jedoch mit der Maus über den Kartenbereich gehe, sehe ich ein Popup das hat den Datenwert. Woran könnte das liegen?
Unten ist der HTML-Code. Der Code sollte jedoch keine Probleme haben, da er, wie bereits erwähnt, vor einem Monat getestet wurde.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="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>
html
javascript
Julia_arch
quelle
quelle
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>Antworten:
Ich habe das Problem herausgefunden. Es wurde durch das neueste Update von Highcharts auf Version 5.0.0 verursacht. Das Problem tritt auf, wenn ich versuche, die drawPoints () - Funktion von heatmap.prototype genau in Zeile 55 ( https://jsfiddle.net/d_paul/aja0hmh1/2/ ) einzufügen . Ich habe es geändert von:
Zu
quelle