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

兔宝宝 发布于 2011/08/30 10:22
阅读 3K+
收藏 4

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

Js代码 
  1. var pie = new Chart.Pie({  
  2.                 'item' : [  
  3.                     {'text':'IE''value' : '53.68%'},  
  4.                     {'text':'Firefox''value' : '21.67%'},  
  5.                     {'text':'Chrome''value' : '13.11%'},  
  6.                     {'text':'Opera''value' : '1.73%'},  
  7.                     {'text':'Safari''value' : '7.48%'},  
  8.                     {'text':'Other''value' : '1.73%'}  
  9.                     ],  
  10.                 'padding' : 55,  
  11.                 'showValue' : true  
  12.             }).render('canvas-wrapper');  
  

饼型图item的数据结构是

Js代码 
  1. [{'text':text,'value':value,'color':color}]  

 

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

 

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


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

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

加载中
0
李永波
李永波
不错 太漂亮了
0
StarCraft
StarCraft

good tool~ thx for your sharing

0
spf237333696
spf237333696
这个怎么用呀?能不能写一个完整的列子给我呀!!!谢谢了!!!
0
兔宝宝
兔宝宝

不知道你想要什么样的完整的例子? 在demo里已经讲的很清楚了啊

只是有一点需要注意 要在html完全加载完再创建使用, 也就是说在 body 的onload方法里调用

或者如果你使用的是jquery需要再ready方法里使用

0
j
jjj4801256

    <script language="javascript" type="text/javascript"
   src="style/Chart.js"></script>

    <script type="text/javascript">
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');
</script>

  </head>
  <body>

  </body>
</html>
新手,可时间很紧迫,能给说详细么,谢谢

0
浩安
浩安
那如果用的是ZK呢?
0
浩安
浩安

结合ZK框架该怎么使用,有人用过吗,给我发个完整Demo,569114553@qq.com,谢谢各位大侠

欢迎回话.

返回顶部
顶部