<html>
<head>
<title>Highcharts test 3 (縦棒グラフ (column) で X 軸のラベルを角度を付けて表示する)</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="sample06.js"></script>
</head>
<body>
<div id="container0" style="height: 400px; width: 800px; margin: 0;"></div>
</body>
</html>
sample06.js
$(document).ready(function() {
$.get('sample06.csv', function(data) {
var options = {
chart: {
renderTo: 'container0',
type: 'column',
zoomType: 'xy',
},
title: {
text: 'test chart 1',
},
xAxis: {
categories: [],
labels: {
rotation: -45,
align: 'right',
}
},
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: '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)
});
});
sample06.csv
January,Feburary,March,April,May,Jun,July,August,September,October,November,December 4.8,5.4,8.8,14.5,19.6,21.4,26.4,29.1,26.2,19.4,12.7,7.3出力結果
sample06 (fc2 に置いてあるテストページに飛びます)
0 件のコメント:
コメントを投稿