0
いくつかのテキストファイルからデータを抽出し、いくつかのHTMLコードとともにデータを書き出し、.htmlファイルに保存するPythonコードを書きました。各ファイルはHighchart拡張ヒートマップを生成する必要があります。生成されたファイルを開いてもうまくいかない場合は、空白のHTMLページが表示されます。しかし、jsFiddleにHTMLコードをコピーして貼り付けたときに、完全な作業チャートを取得できましたか？私はHTML初心者です！ここで は、私がこれまでに（実際のデータが原因ポスト限度に削除されるの大半）HTMLページにハイチャートを表示するにはどうすればよいですか？
<!DOCTYPE html>
<html>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/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,6,0.0033
2013-1-1,7,0.0033
2013-1-1,8,0.1999
2013-1-1,9,0.3319
2013-1-1,10,0.3881
2013-1-1,11,0.3845
2013-1-1,12,0.3393
2013-1-1,13,0.2786
2013-1-1,14,0.2671
2013-1-1,15,0.2813
2013-1-1,16,0.2658
2013-1-1,17,0.2186
2013-1-1,18,0.0033
2013-1-2,6,0.0033
2013-1-2,7,0.0033
2013-1-2,8,0.1946
2013-1-2,9,0.2907
2013-1-2,10,0.3349
2013-1-2,11,0.3550
2013-1-2,12,0.3453
2013-1-2,13,0.3256
2013-1-2,14,0.3021
2013-1-2,15,0.2885
2013-1-2,16,0.2645
2013-1-2,17,0.2096
2013-1-2,18,0.0033
2013-1-3,6,0.0033
2013-1-3,7,0.0033
2013-1-3,8,0.1930
2013-1-3,9,0.2193
2013-1-3,10,0.2987
2013-1-3,11,0.3786
2013-1-3,12,0.3533
2013-1-3,13,0.3542
2013-1-3,14,0.3389
2013-1-3,15,0.3037
2013-1-3,16,0.2876
2013-1-3,17,0.2310
2013-1-3,18,0.0033
2013-1-4,6,0.0033
2013-1-4,7,0.0033
2013-1-4,8,0.2098
2013-1-4,9,0.2602
2013-1-4,10,0.3613
2013-1-4,11,0.4041
2013-1-4,12,0.3540
2013-1-4,13,0.3139
2013-1-4,14,0.2810
2013-1-4,15,0.2547
2013-1-4,16,0.2511
2013-1-4,17,0.2185
2013-1-4,18,0.1818
2013-1-5,6,0.0033
2013-1-5,7,0.0033
2013-1-5,8,0.2135
2013-1-5,9,0.3367
2013-1-5,10,0.3959
2013-1-5,11,0.3862
2013-1-5,12,0.3196
2013-1-5,13,0.2738
2013-1-5,14,0.2613
2013-1-5,15,0.2586
2013-1-5,16,0.2539
2013-1-5,17,0.2191
2013-1-5,18,0.1836
2013-1-6,6,0.0033
2013-1-6,7,0.0033
2013-1-6,8,0.2059
2013-1-6,9,0.2252
2013-1-6,10,0.2858
2013-1-6,11,0.3271
2013-1-6,12,0.3339
2013-1-6,13,0.3275
2013-1-6,14,0.2996
2013-1-6,15,0.2997
2013-1-6,16,0.2613
2013-1-6,17,0.2494
2013-1-6,18,0.0480
2013-1-7,6,0.0033
2013-1-7,7,0.0033
2013-1-7,8,0.0462
2013-1-7,9,0.2475
2013-1-7,10,0.2820
2013-1-7,11,0.3236
2013-1-7,12,0.3425
2013-1-7,13,0.3598
2013-1-7,14,0.3103
2013-1-7,15,0.2893
2013-1-7,16,0.2566
2013-1-7,17,0.2344
2013-1-7,18,0.0988
2013-1-8,6,0.0033
2013-1-8,7,0.0033
2013-1-8,8,0.1704
2013-1-8,9,0.2533
2013-1-8,10,0.3186
2013-1-8,11,0.3332
2013-1-8,12,0.3660
2013-1-8,13,0.3613
2013-1-8,14,0.3664
2013-1-8,15,0.3386
2013-1-8,16,0.3091
2013-1-8,17,0.2736
2013-1-8,18,0.0988
</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 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.
// arguments[0].call(this);
}
});
H.seriesTypes.heatmap.prototype.directTouch = false; // Use k-d-tree
}(Highcharts));
var start;
$('#container').highcharts({
data: {
csv: document.getElementById('csv').innerHTML,
parsed: function() {
start = +new Date();
}
},
chart: {
type: 'heatmap',
margin: [60, 10, 80, 50]
},
title: {
text: 'Highcharts extended heat map',
align: 'left',
x: 40
},
subtitle: {
text: 'Temperature variation by day and hour through 2013',
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, 16],
tickWidth: 1,
min: 6,
max: 18,
reversed: true
},
colorAxis: {
stops: [
[0, '#3060cf'],
[0.5, '#fffbbc'],
[0.9, '#c4463a'],
[1, '#c4463a']
],
min: 0,
max: 1,
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ファイルをダブルクリックすると何も見ることができません！理由は何でしょうか？ –
@Julia_arch助けてくれてうれしい！ちょっと分かりましたが、「ブラウザで開くためにhtmlファイルをダブルクリックする」という意味はどうですか？どこからダブルクリックしますか？ –
私が間違った用語を使用するとお詫び申し上げます、私はHTMLに慣れていません。私は自分のラップトップ上の.htmlファイルにHTMLコードを保存します。次に、.htmlファイルをダブルクリックしてブラウザに開きます。 –