<html>
<head>
<title>Highcharts test 2 (描くデータに値を表示する)</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="highcharts2.js"></script>
</head>
<body>
<div id="container0" style="height: 400px; margin: 0;"></div>
<div id="container1" style="height: 400px; margin: 0;"></div>
</body>
</html>
sample05.js
$(document).ready(function() {
$.get('sample05-1.csv', function(data) {
var options = {
chart: {
renderTo: 'container0',
type: 'line',
zoomType: 'xy',
},
title: {
text: 'test chart 1',
},
xAxis: {
categories: []
},
yAxis: {
},
plotOptions: {
line: {
// 各データを値付きで表示する
dataLabels: {
enabled: true
},
// データ上にマウスポインタを置いた時に ToolTip が表示されないようにする
enableMouseTracking: false
},
},
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)
});
$.get('sample05-2.csv', function(data) {
var options = {
chart: {
renderTo: 'container1',
type: 'bar',
zoomType: 'xy',
},
title: {
text: 'test chart 2',
},
xAxis: {
categories: []
},
yAxis: {
},
plotOptions: {
bar: {
// 各データを値付きで表示する
dataLabels: {
enabled: true
},
// データ上にマウスポインタを置いた時に ToolTip が表示されないようにする
enableMouseTracking: false
}
},
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)
});
});
sample05-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.5sample05-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出力結果
sample05 (fc2 に置いてあるテストページに飛びます)
0 件のコメント:
コメントを投稿