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>
Die Daten sind offensichtlich nicht mehr verfügbar. Da Sie jedoch keinerlei Angaben gemacht haben, können wir Ihnen nicht weiterhelfen. Sehen Sie sich die Registerkarte Netzwerk der Entwicklertools Ihres Browsers an.
—
Daniel B
Die HTML-Dateien und die Daten werden niemals geändert, verschoben oder bearbeitet! Sie sind gleich. Sie haben vor einem Monat gearbeitet. Beim Bewegen des Mauszeigers über die Daten im Display wird der Datenwert in einem Popup angezeigt. Dadurch habe ich das Gefühl, dass Google den Jquery-Link möglicherweise geändert oder aktualisiert hat. Hier ist der Link, den ich derzeit habe:
—
Julia_arch
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
@DanielB, ich habe meine Frage aktualisiert
—
Julia_arch