i2i無料WEBパーツ
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
引き続き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>
スポンサーサイト
Javascriptでグラフを表示するライブラリをまとめたサイトがあったのでメモ。

データ可視化のためのグラフ描画JavaScriptライブラリ20選

その中で紹介してあった、HightcharsJSの棒グラフが素敵だったので、ダウンロードしてゴニョゴニョしてみました。

Javascript内のパラメータを修正するだけで、こんな感じのグラフが作れます。
なかなか、使えそうですね。。。
20110417_javascriptグラフ

さらにグラフの右上にはアイコンがありまして、グラフのプリントアウトやJPEG、PDFへの出力が出来てしまいます。なかなかの優れものですな。

20110417_javascriptグラフ02

しかし、残念ながら日本語には対応していないようです。日本語部分が□で表示されてますね・・・(汗

20110417_javascriptグラフ03

とはいえ、なかなか使えるライブラリを見つけました!!
GAE/Jでサイトを作り始めているので、それに組み込んで行きたいところですな。


作成したサンプルソースはこちらです。

<!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>Graph Test 00</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">

var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'column',
margin: [ 50, 50, 100, 80]
},
title: {
text: '2011年4月12日 時間別アクセス数'
},
xAxis: {
categories: [
'0',
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'10',
'11',
'12',
'13',
'14',
'15',
'16',
'17',
'18',
'20',
'21',
'22',
'23',
],
labels: {
rotation: -45,
align: 'right',
style: {
font: 'normal 13px Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'アクセス数(回)'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.x +'時~</b><br/>'+
'アクセス数: '+ this.y +
' 回';
}
},
series: [{
name: 'Population',
data: [100, 98, 97, 76, 76, 30, 20, 24, 16,
30, 43, 60, 78, 98, 80, 76, 90, 102,
98, 100,120,123,110],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: -3,
y: 10,
formatter: function() {
return this.y;
},
style: {
font: 'normal 10px Verdana, sans-serif'
}
}
}]
});


});

</script>
</head>
<body>
<h1>Javascriptによるグラフ表示のテスト</h1>
<!-- 3. Add the container -->
<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>
</body>
</html>


AJAXの使えそうなインターフェースをまとめておきました。

ウィンドウ内のサブウィンドウ表示が素敵
http://stickmanlabs.com/lightwindow/

これもウィンドウ内のサブウィンドウで写真を表示
http://reghellin.com/milkbox/

写真のスライドの仕方が素敵ですね。
http://www.phatfusion.net/imagemenu/index.htm

これもいいかも。ページをAJAXでロードするので画面の
ちらつきがない。
http://www.phatfusion.net/pageloader/#http://www.phatfusion.net/pageloader/content3.htm

このメニューのハイライトの動きはいいなぁ。
http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers/

画像が水平に反射しているような効果
http://www.digitalia.be/software/reflectionjs-for-mootools

画像認証?一応メモ
http://psyrens.com/captcha/

AJAXメニュー
http://jsajax.com/DropDownMenuArticle286.aspx

AJAXメニュー
ちょっとセンスないけど、機能的には使えそう
http://jsajax.com/cssPlayMenuImageDropdown2Article1257.aspx

ドロップダウンメニュー
http://jsajax.com/CssDropdownPullUp1Article1204.aspx
http://jsajax.com/CssDropdownAnimatedArticle1203.aspx
http://jsajax.com/jQueryDropDownMenuArticle1087.aspx

ドロップダウンメニュー
これも遊びごころあっていいかも
http://jsajax.com/jQueryHorizontalSlidingDropdownMenu2Article1178.aspx
ドック型メニュー
おもしろいけど使えるかどうかは微妙か・・・
http://jsajax.com/jQueryIconDockArticle1080.aspx

左側のスライドメニュー クール。使いやすいかも。
http://jsajax.com/SlashdotMenuArticle770.aspx

AJAXの遊びついでにアフィリエイトネタってことでいいかも
http://jsajax.com/TabContentArticle631.aspx
http://jsajax.com/ScrollAmazonBooksArticle490.aspx
http://jsajax.com/GetBooksByKeywordMultlColumnsArticle482.aspx

WEBサービスの勉強にいいね。livedoorのウェブサービスですね。
http://jsajax.com/GetWeatherForecast2Article462.aspx
■ソースコードの貼り付けについて、いろいろ書いているのでメモ
http://blog.37to.net/2007/06/syntax_highlighter/

YUIのTreeを使ってサービスを作ろうと思ったりして。
でもってJSONのお勉強メモです。

YUIのツリーメニューでAjaxに動的ロード
サンプルもあるのでわかりやすい。

JSONの公式Webサイト
JSON-libなどをダウンロードできます。

きのさいと-JSON/Json-libを使う
JSON-libのTipsがあります。わかりやすいですな。

JSONを使ってAJAXベースのアプリケーションを高速化する
PHPでの説明だけど、サンプルコードをダウンロードできるので、参考になる。
Javaに置き換えるのも簡単そう。

>>次のページ
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。