扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
你可以很容易的使用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");
}
截图展示：
启动界面：
cdn.grapecity.com/p_w_upload.aspx?p_w_uploadid=3320">
选择国家：
选择城市：
你也试一试？
Demo 下载
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网