javascript/Yahoo UI Library/Chart - ウィキっとく？

javascriptでグラフを表示する（Yahoo UI Library: Charts）

• Yahoo UI LibraryのChartライブラリ -- http://developer.yahoo.com/yui/charts/
  • 注意：ここで使用しているYahoo UI Library2.6.0のChartライブラリはexperimental（実験？）ステータス
• クライアントにFlash Player 9.0.45以降がインストールされている必要がある。
• データはYahoo UI LibraryのDataSourceを使用する。

チャートの種類

• 以下の6つがあるようだ。
  • YAHOO.widget.LineChart（折れ線グラフ）
  • YAHOO.widget.BarChart（横棒グラフ）
  • YAHOO.widget.ColumnChart（縦棒グラフ）
  • YAHOO.widget.PieChart（円グラフ）
  • YAHOO.widget.StackedBarChart（横積み上げ棒グラフ）
  • YAHOO.widget.StackedColumnChart（縦積み上げ棒グラフ）

サンプル

• 以下はそれぞれのグラフの簡単なサンプル

事前準備

• 必要ライブラリの読み込み

  <!-- Dependencies -->
   <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
   <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/element/element-beta-min.js"></script>
   <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/datasource/datasource-min.js"></script>
   <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script>
   <!-- OPTIONAL: Connection (enables XHR) -->
   <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script>
   <!-- Source files -->
   <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/charts/charts-experimental-min.js"></script>

• データソースなどの準備

  YAHOO.util.Event.onDOMReady(function() {
  	//データ
  	var myData = [
  		{name:"鈴木", kokugo:100, sugaku:60, rika:70, shakai:50, eigo:95},
  		{name:"佐藤", kokugo:50, sugaku:100, rika:100, shakai:70, eigo:45},
  		{name:"小林", kokugo:70, sugaku:70, rika:70, shakai:70, eigo:70},
  		{name:"中村", kokugo:75, sugaku:95, rika:80, shakai:80, eigo:95},
  		{name:"高橋", kokugo:80, sugaku:50, rika:80, shakai:90, eigo:90}
  	];
   
  	//データソース
  	var myDataSource = new YAHOO.util.DataSource(myData);
  	myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
  	myDataSource.responseSchema = {
  		fields: [
  			"name",
  			{key:"kokugo", parser:"number"},
  			{key:"sugaku", parser:"number"},
  			{key:"rika", parser:"number"},
  			{key:"shakai", parser:"number"},
  			{key:"eigo", parser:"number"}
  		]
  	};
   
  	//チャート使用flashの指定
  	YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf";
   
  	//以下、チャートの記述・・・
   
  });

YAHOO.widget.LineChart

• html

  <div id="myLineChart" style="width:400px;"></div>

• javascript

  //LineChart
  var myLineChart = new YAHOO.widget.LineChart("myLineChart", myDataSource, {
  	xField: "name",
  	yField: "kokugo"
  });

YAHOO.widget.BarChart

• html

  <div id="myBarChart" style="width:400px;"></div>

• javascript

  //BarChart
  var myBarChart = new YAHOO.widget.BarChart("myBarChart", myDataSource, {
  	xField: "kokugo",
  	yField: "name"
  });

YAHOO.widget.ColumnChart

• html

  <div id="myColumnChart" style="width:400px;"></div>

• javascript

  //ColumnChart
  var myColumnChart = new YAHOO.widget.ColumnChart("myColumnChart", myDataSource, {
  	xField: "name",
  	yField: "kokugo"
  });

YAHOO.widget.PieChart

• html

  <div id="myPieChart" style="width:400px;"></div>

• javascript

  //PieChart
  var myPieChart = new YAHOO.widget.PieChart("myPieChart", myDataSource, {
  	categoryField: "name",
  	dataField: "kokugo"
  });

YAHOO.widget.StackedBarChart

• html

  <div id="myStackedBarChart" style="width:400px;"></div>

• javascript

  //StackedBarChart
  var myStackedBarChart = new YAHOO.widget.StackedBarChart("myStackedBarChart", myDataSource, {
  	series: [
  		{displayName:"国語", xField: "kokugo"},
  		{displayName:"数学", xField: "sugaku"},
  		{displayName:"理科", xField: "rika"}
  	],
  	yField: "name"
  });

YAHOO.widget.StackedColumnChart

• html

  <div id="myStackedColumnChart" style="width:400px;"></div>

• javascript

  //CStackedolumnChart
  var myStackedColumnChart = new YAHOO.widget.StackedColumnChart("myStackedColumnChart", myDataSource, {
  	xField: "name",
  	series: [
  		{displayName:"国語", yField: "kokugo"},
  		{displayName:"数学", yField: "sugaku"},
  		{displayName:"理科", yField: "rika"}
  	]
  });