ComponentOne Wijmo Charts 缩放

你可以很容易的使用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>
复制代码

。现在，仅仅通过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 下载：