你可以很容易的使用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 屬性去放大和縮小圖片?，F在，僅僅通過zoom 屬性（Firefox -moz-transform 屬性）可以實現Wijmo Chart 的縮放操作了。
<input type="p_w_picpath" id="btnZoomIn" style="height: 30px; width: 30px"
src="http://icons.iconarchive.com/icons/visualpharm/must-have/256/Zoom-In-icon.png" />
<input type="p_w_picpath" 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");
}
截圖展示：
啟動界面：
cdn.grapecity.com/p_w_upload.aspx?p_w_uploadid=3320">
選擇國家：
選擇城市：
你也試一試？
Demo 下載
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
