圓餅圖,用Yahoo畫圖表教學之一

Yahoo開發者社群(YDN)有不少開放工具及專案計畫,而其中的Yahoo使用者介面函式庫(YUI Library),是以javascript撰寫,提供眾多與使用者互動所需的功能函式。來看看這個我最喜歡的項目,圖表Chart。

先實作一個圓餅圖如下(滑鼠移至圖表會顯示數據):

Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can install the latest version at the Adobe Flash Player Download Center.


原始碼及註解:

<!-- 匯入yui chart起始js檔(從範例檔取出,和官方建議有異) -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yuiloader/yuiloader-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/dom/dom-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/event/event-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.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/charts/charts-experimental-min.js"></script>

<!-- 圓餅圖位置 -->
<div id="chart" style="height:300px;width:420px">Unable to load Flash content. The YUI Charts Control requires Flash Player 9.0.45 or higher. You can install the latest version at the <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player Download Center</a>.</div>

<!-- 建立資料來源及其它設定值 -->
<script type="text/javascript">
//--- 載入圖表flash檔
YAHOO.widget.Chart.SWFURL = "http://yui.yahooapis.com/2.6.0/build//charts/assets/charts.swf";

//--- 資料來源YAHOO.example.publicOpinion,可自行新增修改刪除內容
	YAHOO.example.publicOpinion =
	[
		{ response: "hello", count: 271214 },
		{ response: "hello2", count: 271214 },
		{ response: "hello3", count: 271214 },
		{ response: "hello4", count: 271214 },
		{ response: "hello5", count: 271214 },
		{ response: "測試啦!", count: 81845 }
	]

	var opinionData = new YAHOO.util.DataSource( YAHOO.example.publicOpinion );
	opinionData.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
	opinionData.responseSchema = { fields: [ "response", "count" ] };

//--- 圓餅圖
	var mychart = new YAHOO.widget.PieChart( "chart", opinionData,
	{
		dataField: "count",
		categoryField: "response",
		style:
		{
			padding: 20,
			legend:
			{
				display: "right",
				padding: 10,
				spacing: 5,
				font:
				{
					family: "Arial",
					size: 13
				}
			}
		},
		//用於 flash player express install(為使用者升級flash)
		expressInstall: "http://developer.yahoo.com/yui/examples/charts/assets/expressinstall.swf"
	});
</script>

註1:更多內容(長條圖、趨勢圖、比較圖等)可瀏覽官方網站的Charts [experimental](它標註為實驗版,應仍在開發中,相信未來還會有新增功能)

註2:官方網站所述起始匯入的js檔無法作用:

<!-- 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-beta-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>

註3:推薦另外一個線上畫圓餅圖的工具HeartRails Graph

註4:Flash Player Express Install詳細說明

註5:過幾天再寫個可自訂輸入資料源的表單程式來玩

您可能也會喜歡…

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *