论坛首页 Web前端技术论坛

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

浏览 9914 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-08-23   最后修改:2011-08-23

 

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:这个很重要

 

 

主要的方法只有四个

  1. add(item) 添加一个比较对象
  2. render(wrapper) 渲染,参数wrapper可以是<canvas></canvas>或<div></div>
  3. fail() 如果不支持图表时,需要用到的方法(一般不会被用到)
  4. compose(otherChart)  组合其他的图表


1.饼型图 Chart.Pie

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的数据结构是

[{'text':text,'value':value,'color':color}]

 

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

 

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


如果想要鼠标滑动凸出扇形,将focusEvent设置为mousemove即可

具体例子可以参见 http://everyjs.co.cc/demo.html#pie1

   发表时间:2011-08-29  
我用IE6,IE8运行不起来,不支持IE哦。
0 请登录后投票
   发表时间:2011-08-29   最后修改:2011-08-29

有图有真相

哥们er,不知道你的浏览器是怎么了



  • 大小: 95.6 KB
  • 大小: 84.5 KB
0 请登录后投票
   发表时间:2011-08-29  
看着不错。
0 请登录后投票
   发表时间:2011-08-30  
效果不错,但是我在chrome下面bar什么的放大等效果都出不来
最主要的是图形整体看起来不是太漂亮
0 请登录后投票
   发表时间:2011-08-30  
除了饼图,还支持写什么图?
0 请登录后投票
   发表时间:2011-08-31  
notadoor 写道
除了饼图,还支持写什么图?

支持各种图表
你可以到http://everyjs.co.cc/demo.html去详细的看一下
0 请登录后投票
   发表时间:2011-08-31  
不错,学习学习~
0 请登录后投票
   发表时间:2011-08-31  
明显感觉给用户的体验感觉不怎么样啊,楼主,效果只能做到这种程度吗?
0 请登录后投票
   发表时间:2011-08-31  
当然不是 目前只是beta版本 有待改进的地方还有很多, 我们正在努力实现
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics