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

先實作一個圓餅圖如下（滑鼠移至圖表會顯示數據）：

原始碼及註解：

<!-- 匯入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：過幾天再寫個可自訂輸入資料源的表單程式來玩