<html>
<head>
<title>Highcharts test 6 (Pie + csv)</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="sample09.js"></script>
</head>
<body>
Pie + csv
<div id="container0" style="height: 400px; width: 800px; margin: 0;"></div>
</body>
</html>
sample09.js
$(document).ready(function() {
$.get('sample09.csv', function(data) {
var options = {
chart: {
renderTo: 'container0',
},
title: {
text: 'Pie chart'
},
plotOptions: {
pie: {
// データをクリックすると円グラフから少し離れて表示される
allowPointSelect: true,
// データ上にマウスを持っていった時に指マークで表示される
cursor: 'pointer',
// 各データを値付きで表示する
dataLabels: {
enabled: true,
formatter: function() {
// 小数点第 2 位まで表示する
return this.point.name + ': ' + (Math.round(this.percentage * 100) / 100) + ' %';
}
}
}
},
series: [{
type: 'pie',
data: []
}]
}
// Split the lines
var lines = data.split('\n');
// Iterate over the lins and add categories or series
$.each(lines, function(lineNo, line) {
if (line == '') {
// No operation for No data line
return true;
}
var items = line.split(',');
switch (lineNo) {
case 0:
//header line contains categories
$.each(items, function(itemNo, item) {
var d = [];
d.push(item);
options.series[0].data.push(d);
});
break;
case 1:
default:
// the rest of the lines contain data with their name in the first position
// 全体数を算出する
var total = 0;
$.each(items, function(itemNo, item) {
total += parseFloat(item);
});
var i = 0;
$.each(items, function(itemNo, item) {
rate = (item / total) * 100;
options.series[0].data[i].push(parseFloat(rate));
i++;
});
break;
}
});
// Create the chart
var chart = new Highcharts.Chart(options)
});
});
sample09.csv
Tanaka,Suzuki,Yamada 10,15,8出力結果
sample09 (fc2 に置いてあるテストページに飛びます)
