可能有些人早就知道,canvas 这个元素,这个是在 w3c HTML5.0 方案确定的元素, 可惜的是 IE 不支持这个元素,
火狐在很早的版本就支持了这个元素, 下面是一些浏览器支持 canvas 元素预览图。
Firefox | Safari | Opera | ExplorerCanvas |
---|---|---|---|
2.0 ○ | 2.0 ○ | 9.2 ○ | 0002 △ |
3.0 ○ | 3.0 ○ | 9.5 ○ |
ExplorerCanvas 是 Google 公司推出的一个专门让IE支持 canvas 元素的扩展类,即 excanvas.js,最新版本是 0002版本
为什么是三角呢,因为只提供部分属性方法支持。
---------------------------------------------------------------------------------------------------------
不可否认的javascript的先天缺点:
可怜的javascript由于微软,坚决反对,对js的扩展,而且IE占有 70%浏览器市场,使得js html 扩展举步维艰,因为微软主推 Silverlight,而
Adobe 公司放弃了svg 主推 Flash, 所以javascript 就是一个可怜儿,没人理。
但是javascript 是个神奇的语言,官方不给,民间自创,没有的方法,函数,可以通过原型构建新对象,所以像JQ,等这些扩展
控件百花齐放,javascript 没有图像库,绘图类,但是可以在其他浏览器用canvas 元素,在IE可以用vml 构造canvas 。
但是给我的感觉无论是,div实现图形还是 canvas 元素,给人的感觉都是太肤浅了,不支持的太多了比如最重要的文字、字体,旋转,变形。
和现有的flash 和层出不穷的 Silverlight没的比、不能比、没法比、千万不要比。
这里我有一句忠告就是用 javascript 绘图 = 自捏,还是老老实实的用 Silverlight 或 flash 。
--------------------------------------------------------------------------------------------------------
不可否认的javascript的先天优点:
代码量小,不用客户端安装任何插件,这对企业级的内网用户再合适不过了,有很多优秀的js库可以丰富js脚本。
这里要感谢一下 Google ,它推出的 excanvas.js 扩展类,虽然不是完美,功能太少,但是至少让
javascript 在多浏览器下,真正支持了绘图。
这里我推荐一个网站吧,因为国内几乎没有人用js绘图,所以相关的资料很少
但在日本就不一样了,他们把html5 称为次时代html语言。
http://www.html5.jp/ 小日本的网站,提供了非常详细的 html5 的参考资料,包括canvas 元素,而且方法,属性
都非常友好的告诉了你,那个浏览器支持和不支持。
canvas 元素还是很有用的,假如你想快速开发,给客户生成报表,图饼一类的,你可以不用借助于 Silverlight 或 flash 。
推荐几个小日本的控件(都是基于excanvas.js )
这几个控件使用超级简单
柱形图设置
var items = [
["商品A", 20, 58, 40, 14, 38, 20, 40],
["商品B", 10, 14, 58, 80, 70, 90, 20],
["商品C", 10, 14, 58, 80, 70, 90, 20],
["商品D", 10, 14, 58, 80, 70, 90, 20],
["商品E", 10, 14, 58, 80, 70, 90, 20]
];
7 个数字组,代表的是一周的7天,如果你有多个商品可以定义更多 商品F,商品G, 控件自动分配。
我测试过所有浏览器都支持,如果作为企业用户,你不想用 Flash 等可以用这个,修改维护都很方便
圆饼图设置
var items = [
["sample01", 150],
["sample02", 100],
["sample03", 80],
["sample04", 60],
["sample05", 30],
["sample06", 20],
["sample07", 10],
["sample08", 10],
["sample09", 10],
["sample10", 10],
["sample11", 10],
["sample12", 10]
];
更简单你想增加一个比较就加一个 ["sample13",10] 一条记录,控件会自动计算百分比。