文档章节

easy-pie-chart和excanvas的兼容性问题

烽焱10仴
 烽焱10仴
发布于 2014/10/20 14:22
字数 273
阅读 1317
收藏 0

之前多次调节IE的canvas兼容性,总结如下:



<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>jQuery</title>
	<meta name="viewport" content="width=device-width"/>
	<link rel="stylesheet" href="style.css"/>
	<script src="excanvas.compiled.js"></script>
	<script>
	// IE function.bind polyfill
	if (!Function.prototype.bind) {
		Function.prototype.bind = function (oThis) {
			if (typeof this !== "function") {
				// closest thing possible to the ECMAScript 5 internal IsCallable function
				throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
			}

			var aArgs = Array.prototype.slice.call(arguments, 1),
				fToBind = this,
				fNOP = function () {},
				fBound = function () {
					return fToBind.apply(this instanceof fNOP && oThis ? this : oThis,
				aArgs.concat(Array.prototype.slice.call(arguments)));
			};

			fNOP.prototype = this.prototype;
			fBound.prototype = new fNOP();

			return fBound;
		};
	}
	</script>
</head>
<body>

	<ul>
		<li><a href="index.html">Vanilla JS</a></li>
		<li><a href="jquery.html">jQuery plugin</a></li>
		<li><a href="angular.html">Angular module</a></li>
	</ul>

	<p>Demo for old Internet Explorer Versions 7 and 8 with <a href="http://excanvas.sourceforge.net" target="_blank">excanvas</a> and a Function.bind polyfill.</p>

	<span class="chart" data-percent="86">
		<span class="percent"></span>
	</span>

	<span class="btn js_update">Update chart</span>

	<script src="http://www.91liren.com:80/js/jquery.min.js"></script>
	<script src="../dist/jquery.easypiechart.min.js"></script>
	<script>
	$(function() {
		var $chart = $('.chart');
		$chart.easyPieChart({
			onStep: function(from, to, percent) {
				$(this.el).find('.percent').text(Math.round(percent));
			}
		});
		var chart = window.chart = $chart.data('easyPieChart');
		chart.update($chart.data('percent'));
		$('.js_update').on('click', function() {
			chart.update(Math.random()*200-100);
		});
	});
	</script>
</body>
</html>



前一段中的《script》是对IE对bind()的扩展,很重要。

© 著作权归作者所有

烽焱10仴
粉丝 8
博文 44
码字总数 19836
作品 0
大兴
技术主管
私信 提问
AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例

AngularJS进阶(四十一)AngularJS中使用Chart.js制折线图与饼图实例 Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上。目前,它支持6种图表类型(折线图,条形...

sunhuaqiang1
2017/08/29
0
0
Canvas教程(2):HTML5的Canvas概述

<canvas>是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做简单的(和不那么简单的)动画。右面的图象展示了一些<canvas>的应...

程明卫
2011/04/01
0
0
Top 5 Best Open Source Javascript Chart Library

In this post, we will talk about top 5 best open source JavaScript chart libraries. Every site and dashboard are incomplete without charts and graphs so it is very important to ......

Raghuraman Kesavan
2017/12/20
0
0
Web开发系列 - Web Chart

整理一些可以在Web开发中使用的图表控件, 主要为客户端实现方式, 如Flash, JavaScript, Silverlight; 如果是GDI+方式生成统计图表可以看我前几天整理的另外一篇博文C# WinForm开发系列 - Ch...

长征2号
2017/11/01
0
0
joylei/riot-echarts

riot-echarts a no-brainer riot tag to display charts easily with Baidu ECharts, like Google Chart does. Features take advantage of ECharts easy to present data with a DataTable ......

joylei
2016/12/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Oracle SQL语法实例合集

如需转载请注明出处https://my.oschina.net/feistel/blog/3052024 目的:迅速激活Oracle SQL 参考:《Oracle从入门到精通》 ------------------------------------------------------------......

LoSingSang
今天
2
0
增加 PostgreSQL 服务进程的最大打开文件数

https://serverfault.com/questions/628610/increasing-nproc-for-processes-launched-by-systemd-on-centos-7 要在systemd的配置里加才行...

helloclia
今天
2
0
组合模式在商品分类列表中的应用

在所有的树形结构中最适合的设计模式就是组合模式,我们看看常用商品分类中如何使用。 先定义一个树形结构的商品接口 public interface TreeProduct { List<TreeProduct> allProducts(...

算法之名
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部