<html>
<head>
<title>Highcharts test 5 (Pie chart)</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="sample08.js"></script>
</head>
<body>
Pie chart
<div id="container0" style="height: 400px; width: 800px; margin: 0;"></div>
</body>
</html>
sample08.js
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container0',
},
title: {
text: 'Pie chart',
},
plotOptions: {
pie: {
// データをクリックすると円グラフから少し離れて表示される
allowPointSelect: true,
// データ上にマウスを持っていった時に指マークで表示される
cursor: 'pointer',
// 各データを値付きで表示する
dataLabels: {
enabled: true,
formatter: function() {
return this.point.name + ': ' + this.percentage + ' %';
}
},
},
},
series: [{
type: 'pie',
name: '空気の構成比率',
data: [
['窒素', 78.08],
['酸素', 20.95],
['アルゴン', 0.93],
['二酸化炭素', 0.035],
['その他', 0.005],
],
}],
}
// Create the chart
var chart = new Highcharts.Chart(options)
});
出力結果sample08 (fc2 に置いてあるテストページに飛びます)
0 件のコメント:
コメントを投稿