EveryChart教程(一)----饼形图

  
EveryChart是一个使用简单,功能强大的JS绘制图表工具,这里介绍如何使用
Chart是各种图表的基类,不能被实例化,图表的公共属性有:
title  标题(对象)
width   宽
height  高
vivid  是否动画显示
showValue  是否显示值(仪表图是否显示刻度)zoom 放大的方式 通常是有follow和select两种方式
zoomScale  放大倍数
zoomWidth  follow放大时放大镜的宽度
focusEvent  聚焦事件
padding  内补丁
background  背景色
backgroundStop  背景色渐变的截止颜色(如果为false表示不渐变)
link  是否启用链接
tip  鼠标提示
legend  图例
item  图表的各项,因为需要比较,通常是一个数组(仪表图中设置的是一个数值),每种图item的数据结构都不同,稍后逐一介绍.PS:这个很重要


主要的方法只有四个


add(item) 添加一个比较对象
render(wrapper) 渲染,参数wrapper可以是<canvas></canvas>或<div></div>

fail() 如果不支持图表时,需要用到的方法(一般不会被用到)
compose(otherChart)  组合其他的图表




1.饼型图 Chart.Pie
Js代码  
var pie = new Chart.Pie({   
                'item' : [   
                    {'text':'IE', 'value' : '53.68%'},   
                    {'text':'Firefox', 'value' : '21.67%'},   
                    {'text':'Chrome', 'value' : '13.11%'},   
                    {'text':'Opera', 'value' : '1.73%'},   
                    {'text':'Safari', 'value' : '7.48%'},   
                    {'text':'Other', 'value' : '1.73%'}   
                    ],   
                'padding' : 55,   
                'showValue' : true  
            }).render('canvas-wrapper');  

var pie = new Chart.Pie({
                'item' : [
                    {'text':'IE', 'value' : '53.68%'},
                    {'text':'Firefox', 'value' : '21.67%'},
                    {'text':'Chrome', 'value' : '13.11%'},
                    {'text':'Opera', 'value' : '1.73%'},
                    {'text':'Safari', 'value' : '7.48%'},
                    {'text':'Other', 'value' : '1.73%'}
                    ],
                'padding' : 55,
                'showValue' : true
            }).render('canvas-wrapper');   
饼型图item的数据结构是
Js代码  
[{'text':text,'value':value,'color':color}]  

[{'text':text,'value':value,'color':color}]
text  比较项的名称
value  比较项的只,可以是Number或百分比型的
color   比较项的颜色(如果不特殊设定,使用默认颜色)

一个饼型图就这样生成了,简单不?

如果想要鼠标滑动凸出扇形,将focusEvent设置为mousemove即可
具体例子可以参见 http://everyjs.co.cc/demo.html#pie1

推荐链接

3G培训就业月薪平均7K+，不3K就业不花一分钱！
见证又一个准百万富翁的诞生！
20-30万急聘多名天才Java/MTA软件工程师