你可以很容易的使用ComponentOne Wijmo Charts 展示数据。这篇文章介绍怎样使用jQuery 实现Wijmo Charts 的缩放功能。
放大或者缩小 Wijmo Chart，你可以使用 CSS “zoom” 属性。首先，添加以下标记来创建 Wijmo Charts。
| | |
wijbarchartContainer 为 Wijmo Chart 的容器。
放大和缩小
我们添加两个类型为 Image 的 Input 标签。设置他们的 src 属性去放大和缩小图片。现在，仅仅通过zoom 属性（Firefox -moz-transform 属性）可以实现Wijmo Chart 的缩放操作了。 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"); } 截图展示：
启动界面：
选择国家：
选择城市：