<html>
<head>
<title>Highcharts test 4 (Export する画像サイズを指定する)</title>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/modules/exporting.js"></script>
<script type="text/javascript" src="sample07.js"></script>
</head>
<body>
Export する画像サイズを指定する
<div id="container0" style="height: 400px; width: 800px; margin: 0;"></div>
<div id="container1" style="height: 400px; width: 800px; margin: 0;"></div>
</body>
</html>
sample07.js
$(document).ready(function() {
$.get('sample07-1.csv', function(data) {
var options = {
chart: {
renderTo: 'container0',
type: 'line',
zoomType: 'xy',
},
title: {
// Title を 'exporting.width=default' にしていると画像ファイルへの出力でエラーが発生する
text: 'exporting.width = default',
},
xAxis: {
categories: [],
},
yAxis: {
},
series: []
}
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line contains categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
name: '2012',
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item));
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options)
});
$.get('sample07-2.csv', function(data) {
var options = {
chart: {
renderTo: 'container1',
type: 'line',
zoomType: 'xy',
},
title: {
text: 'exporting.width = 1200',
},
xAxis: {
categories: [],
},
yAxis: {
},
series: [],
exporting: {
width: 1200,
}
}
// Split the lines
var lines = data.split('\n');
// Iterate over the lines and add categories or series
$.each(lines, function(lineNo, line) {
var items = line.split(',');
// header line contains categories
if (lineNo == 0) {
$.each(items, function(itemNo, item) {
options.xAxis.categories.push(item);
});
}
// the rest of the lines contain data with their name in the first position
else {
var series = {
name: '2011',
data: []
};
$.each(items, function(itemNo, item) {
series.data.push(parseFloat(item));
});
options.series.push(series);
}
});
// Create the chart
var chart = new Highcharts.Chart(options)
});
});
sample07-1.csv
Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec 5.1,7.0,8.1,14.5,18.5,22.8,27.3,27.5,25.1,19.5,14.9,7.5sample07-2.csv
Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec 4.8,5.4,8.8,14.5,19.6,21.4,26.4,29.1,26.2,19.4,12.7,7.3出力結果
sample07 (fc2 に置いてあるテストページに飛びます)
0 件のコメント:
コメントを投稿