你可以很容易的使用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" onclick="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" onclick="btnZoomIn" 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 下载:
|