「javascript/Yahoo UI Library/Chart」の編集履歴（バックアップ）一覧はこちら
「javascript/Yahoo UI Library/Chart」(2008/10/27 (月) 02:47:36) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
* javascriptでグラフを表示する（Yahoo UI Library: Charts）
- Yahoo UI LibraryのChartライブラリ -- [[http://developer.yahoo.com/yui/charts/:http://developer.yahoo.com/yui/charts/]]
-- &color(red){注意：ここで使用している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
--- 縦積み上げ棒グラフ
** サンプル
- 以下はそれぞれのグラフの簡単なサンプル
*** 事前準備
- 必要ライブラリの読み込み
#highlight(html){{
<!-- 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>
}}
- データソースなどの準備
#highlight(linenumber,javascript){{
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
#html2(){{{
<div id="myLineChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myLineChart" style="width:400px;"></div>
}}
- javascript
#highlight(javascript){{
//LineChart
var myLineChart = new YAHOO.widget.LineChart("myLineChart", myDataSource, {
xField: "name",
yField: "kokugo"
});
}}
*** YAHOO.widget.BarChart
#html2(){{{
<div id="myBarChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myBarChart" style="width:400px;"></div>
}}
- javascript
#highlight(javascript){{
//BarChart
var myBarChart = new YAHOO.widget.BarChart("myBarChart", myDataSource, {
xField: "kokugo",
yField: "name"
});
}}
*** YAHOO.widget.ColumnChart
#html2(){{{
<div id="myColumnChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myColumnChart" style="width:400px;"></div>
}}
- javascript
#highlight(javascript){{
//ColumnChart
var myColumnChart = new YAHOO.widget.ColumnChart("myColumnChart", myDataSource, {
xField: "name",
yField: "kokugo"
});
}}
*** YAHOO.widget.PieChart
#html2(){{{
<div id="myPieChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myPieChart" style="width:400px;"></div>
}}
- javascript
#highlight(javascript){{
//PieChart
var myPieChart = new YAHOO.widget.PieChart("myPieChart", myDataSource, {
categoryField: "name",
dataField: "kokugo"
});
}}
*** YAHOO.widget.StackedBarChart
#html2(){{{
<div id="myStackedBarChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myStackedBarChart" style="width:400px;"></div>
}}
- javascript
#highlight(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
#html2(){{{
<div id="myStackedColumnChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myStackedColumnChart" style="width:400px;"></div>
}}
- javascript
#highlight(javascript){{
//CStackedolumnChart
var myStackedColumnChart = new YAHOO.widget.StackedColumnChart("myStackedColumnChart", myDataSource, {
xField: "name",
series: [
{displayName:"国語", yField: "kokugo"},
{displayName:"数学", yField: "sugaku"},
{displayName:"理科", yField: "rika"}
]
});
}}
#javascript(){{
<!-- 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>
<script type="text/javascript">
<!--
YAHOO.util.Event.onDOMReady(function() {
var cssLink = document.createElement("link");
cssLink.type = "text/css";
cssLink.rel = "stylesheet";
cssLink.href = "http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css";
document.getElementsByTagName("head")[0].appendChild(cssLink);
document.body.className = "yui-skin-sam";
//データ
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"}
]
};
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf";
//LineChart
var myLineChart = new YAHOO.widget.LineChart("myLineChart", myDataSource, {
xField: "name",
yField: "kokugo"
});
//BarChart
var myBarChart = new YAHOO.widget.BarChart("myBarChart", myDataSource, {
xField: "kokugo",
yField: "name"
});
//ColumnChart
var myColumnChart = new YAHOO.widget.ColumnChart("myColumnChart", myDataSource, {
xField: "name",
yField: "kokugo"
});
//PieChart
var myPieChart = new YAHOO.widget.PieChart("myPieChart", myDataSource, {
categoryField: "name",
dataField: "kokugo"
});
//StackedBarChart
var myStackedBarChart = new YAHOO.widget.StackedBarChart("myStackedBarChart", myDataSource, {
series: [
{displayName:"国語", xField: "kokugo"},
{displayName:"数学", xField: "sugaku"},
{displayName:"理科", xField: "rika"}
],
yField: "name"
});
//CStackedolumnChart
var myStackedColumnChart = new YAHOO.widget.StackedColumnChart("myStackedColumnChart", myDataSource, {
xField: "name",
series: [
{displayName:"国語", yField: "kokugo"},
{displayName:"数学", yField: "sugaku"},
{displayName:"理科", yField: "rika"}
]
});
});
-->
</script>
}}
* javascriptでグラフを表示する（Yahoo UI Library: Charts）
- Yahoo UI LibraryのChartライブラリ -- [[http://developer.yahoo.com/yui/charts/:http://developer.yahoo.com/yui/charts/]]
-- &color(red){注意：ここで使用している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（縦積み上げ棒グラフ）
** サンプル
- 以下はそれぞれのグラフの簡単なサンプル
*** 事前準備
- 必要ライブラリの読み込み
#highlight(html){{
<!-- 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>
}}
- データソースなどの準備
#highlight(linenumber,javascript){{
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
#html2(){{{
<div id="myLineChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myLineChart" style="width:400px;"></div>
}}
- javascript
#highlight(javascript){{
//LineChart
var myLineChart = new YAHOO.widget.LineChart("myLineChart", myDataSource, {
xField: "name",
yField: "kokugo"
});
}}
*** YAHOO.widget.BarChart
#html2(){{{
<div id="myBarChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myBarChart" style="width:400px;"></div>
}}
- javascript
#highlight(javascript){{
//BarChart
var myBarChart = new YAHOO.widget.BarChart("myBarChart", myDataSource, {
xField: "kokugo",
yField: "name"
});
}}
*** YAHOO.widget.ColumnChart
#html2(){{{
<div id="myColumnChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myColumnChart" style="width:400px;"></div>
}}
- javascript
#highlight(javascript){{
//ColumnChart
var myColumnChart = new YAHOO.widget.ColumnChart("myColumnChart", myDataSource, {
xField: "name",
yField: "kokugo"
});
}}
*** YAHOO.widget.PieChart
#html2(){{{
<div id="myPieChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myPieChart" style="width:400px;"></div>
}}
- javascript
#highlight(javascript){{
//PieChart
var myPieChart = new YAHOO.widget.PieChart("myPieChart", myDataSource, {
categoryField: "name",
dataField: "kokugo"
});
}}
*** YAHOO.widget.StackedBarChart
#html2(){{{
<div id="myStackedBarChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myStackedBarChart" style="width:400px;"></div>
}}
- javascript
#highlight(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
#html2(){{{
<div id="myStackedColumnChart" style="width:400px;"></div>
}}}
- html
#highlight(html){{
<div id="myStackedColumnChart" style="width:400px;"></div>
}}
- javascript
#highlight(javascript){{
//CStackedolumnChart
var myStackedColumnChart = new YAHOO.widget.StackedColumnChart("myStackedColumnChart", myDataSource, {
xField: "name",
series: [
{displayName:"国語", yField: "kokugo"},
{displayName:"数学", yField: "sugaku"},
{displayName:"理科", yField: "rika"}
]
});
}}
#javascript(){{
<!-- 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>
<script type="text/javascript">
<!--
YAHOO.util.Event.onDOMReady(function() {
var cssLink = document.createElement("link");
cssLink.type = "text/css";
cssLink.rel = "stylesheet";
cssLink.href = "http://yui.yahooapis.com/2.6.0/build/datatable/assets/skins/sam/datatable.css";
document.getElementsByTagName("head")[0].appendChild(cssLink);
document.body.className = "yui-skin-sam";
//データ
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"}
]
};
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.6.0/build/charts/assets/charts.swf";
//LineChart
var myLineChart = new YAHOO.widget.LineChart("myLineChart", myDataSource, {
xField: "name",
yField: "kokugo"
});
//BarChart
var myBarChart = new YAHOO.widget.BarChart("myBarChart", myDataSource, {
xField: "kokugo",
yField: "name"
});
//ColumnChart
var myColumnChart = new YAHOO.widget.ColumnChart("myColumnChart", myDataSource, {
xField: "name",
yField: "kokugo"
});
//PieChart
var myPieChart = new YAHOO.widget.PieChart("myPieChart", myDataSource, {
categoryField: "name",
dataField: "kokugo"
});
//StackedBarChart
var myStackedBarChart = new YAHOO.widget.StackedBarChart("myStackedBarChart", myDataSource, {
series: [
{displayName:"国語", xField: "kokugo"},
{displayName:"数学", xField: "sugaku"},
{displayName:"理科", xField: "rika"}
],
yField: "name"
});
//CStackedolumnChart
var myStackedColumnChart = new YAHOO.widget.StackedColumnChart("myStackedColumnChart", myDataSource, {
xField: "name",
series: [
{displayName:"国語", yField: "kokugo"},
{displayName:"数学", yField: "sugaku"},
{displayName:"理科", yField: "rika"}
]
});
});
-->
</script>
}}
表示オプション
横に並べて表示：
変化行の前後のみ表示：
