你可以很容易的使用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="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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
