ウィキっとく? javascript > Yahoo UI Library > Chart

※上記の広告は60日以上更新のないWIKIに表示されています。更新することで広告が下部へ移動します。

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>
  • データソースなどの準備
    1. YAHOO.util.Event.onDOMReady(function() {
    2. //データ
    3. var myData = [
    4. {name:"鈴木", kokugo:100, sugaku:60, rika:70, shakai:50, eigo:95},
    5. {name:"佐藤", kokugo:50, sugaku:100, rika:100, shakai:70, eigo:45},
    6. {name:"小林", kokugo:70, sugaku:70, rika:70, shakai:70, eigo:70},
    7. {name:"中村", kokugo:75, sugaku:95, rika:80, shakai:80, eigo:95},
    8. {name:"高橋", kokugo:80, sugaku:50, rika:80, shakai:90, eigo:90}
    9. ];
    10.  
    11. //データソース
    12. var myDataSource = new YAHOO.util.DataSource(myData);
    13. myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
    14. myDataSource.responseSchema = {
    15. fields: [
    16. "name",
    17. {key:"kokugo", parser:"number"},
    18. {key:"sugaku", parser:"number"},
    19. {key:"rika", parser:"number"},
    20. {key:"shakai", parser:"number"},
    21. {key:"eigo", parser:"number"}
    22. ]
    23. };
    24.  
    25. //チャート使用flashの指定
    26. YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf";
    27.  
    28. //以下、チャートの記述・・・
    29.  
    30. });

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"}
    	]
    });