jQuery 綁定 ComponentOne Wijmo Combobox 數據源

你可以很容易的使用ComponentOne Wijmo Charts 展示數據。這篇文章介紹怎樣使用jQuery 實現Wijmo Charts 的縮放功能。

放大或者縮小 Wijmo Chart，你可以使用 CSS “zoom” 屬性。首先，添加以下標記來創建 Wijmo Charts。

<table> 
	<tr> 
		<td> 
			<div id="wijbarchartContainer" style="width: 700px; height: 600px; overflow: auto"> 
				<div id="wijbarchart"> 
				</div> 
			</div> 
		</td> 
		<td> 
			<div id="wijpiechart"> 
			</div> 
		</td> 
	</tr> 
</table>

　　

wijbarchartContainer 爲 Wijmo Chart 的容器。

放大和縮小
我們添加兩個類型爲 Image 的 Input 標籤。設置他們的 src 屬性去放大和縮小圖片。現在，僅僅通過zoom 屬性（Firefox -moz-transform 屬性）可以實現Wijmo Chart 的縮放操作了。

<input type="image" id="btnZoomIn"  style="height: 30px; width: 30px"
src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Zoom-In-icon.png" /> 
<input type="image" id="btnZoomOut"  style="height: 30px; width: 30px"
src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Zoom-Out-icon.png" />

currZoom = $("#wijbarchart").css("zoom"); 
if (currZoom == 'normal') currZoom = 1; 

$("#btnZoomIn").click(function () { 
currZoom *= 1.2; 
$("#wijbarchart").css("zoom", currZoom); 
$("#wijbarchart").css("-moz-transform", "Scale(" + currZoom + ")"); 
$("#wijbarchart").css("-moz-transform-origin", "0 0"); 
$("#wijpiechart").css("zoom", currZoom); 
$("#wijpiechart").css("-moz-transform", "Scale(" + currZoom + ")"); 
$("#wijpiechart").css("-moz-transform-origin", "0 0"); 
}); 

$("#btnZoomOut").click(function () { 
if (currZoom > 0.6) { 
currZoom *= 0.8; 
$("#wijbarchart").css("zoom", currZoom); 
$("#wijbarchart").css("-moz-transform", "Scale(" + currZoom + ")"); 
$("#wijbarchart").css("-moz-transform-origin", "0 0"); 
$("#wijpiechart").css("zoom", currZoom); 
$("#wijpiechart").css("-moz-transform", "Scale(" + currZoom + ")"); 
$("#wijpiechart").css("-moz-transform-origin", "0 0"); 
} 

　　

截圖展示：

啓動界面：

選擇國家：

選擇城市：

你也試一試？
Demo 下載