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>

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");  } 

 

截图展示:
ComponentOne Wijmo Charts 缩放
你也试一试?
Demo 下载

你可能感兴趣的:(Wijmo)