i2i無料WEBパーツ
FC2ブログ

Javascriptでグラフを描写 円グラフ編

AJAX
04 /19 2011
引き続きJavascriptによるグラフの描写を試用してみました。
今回は円グラフです。

使ったのは前回同様、highchartsです。

20110418_javascriptグラフ

これも比較的簡単に使えそうですな。
オンマウスで、項目名が表示されるのも素敵で良いですね。

20110418_javascriptグラフ2

以下、ソースです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<!-- The HTML 4.01 Transitional DOCTYPE declaration-->
<!-- above set at the top of the file will set -->
<!-- the browser's rendering engine into -->
<!-- "Quirks Mode". Replacing this declaration -->
<!-- with a "Standards Mode" doctype is supported, -->
<!-- but may lead to some differences in layout. -->

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>グラフのテスト その2(HightcharsJS Pie Chart)</title>

<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/highcharts.js"></script>

<!-- 1a) Optional: add a theme file -->
<!--
<script type="text/javascript" src="../js/themes/gray.js"></script>
-->

<!-- 1b) Optional: the exporting module -->
<script type="text/javascript" src="../js/modules/exporting.js"></script>

<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
Highcharts.theme = { colors: ['#4572A7'] };// prevent errors in default theme
var highchartsOptions = Highcharts.getOptions();
</script>
<script type="text/javascript">
var chart;
jQuery(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'ブラウザ分析(日別)'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: Highcharts.theme.textColor || '#000000',
connectorColor: Highcharts.theme.textColor || '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
{
name: 'Chrome',
y: 27.3,
sliced: true,
selected: true
},
['Firefox3', 19.1],
['IE7', 12.7],
['IE6', 10.0],
['IE8', 9.1],
['Others', 21.8]
]
}]
});
});
</script>
</head>
<body>
<h3>Javascriptによるグラフ表示のテスト その2(HightcharsJS Pie Chart)</h3>
<!-- 3. Add the container -->
<div id="container" class="highcharts-container" style="height:310px; margin: 0 2em; clear:both; min-width: 400px"></div>

</body>
</html>

コメント

非公開コメント

KevinJohnsonjp

札幌でSEやってる人の業務日誌。

↓こんなのも書いてたりします。
ホットペッパー KJさんのグルメ手帳『北○』の口コミ書きました