Web绘制图表工具 EveryChart
|
admin
2013年8月16日 9:22
本文热度 8783
|
EveryChart是一个基于JavaScript的Web绘制图表工具，它的特点：
- 无须下载任何插件，只要支持canvas的浏览器即可使用。
- 支持动态增加节点。
- 体积小，速度快，使用简单。
- 面向对象架构，方便扩展。
- 拥有详尽的中文文档和本地技术支持。
- 多浏览器支持：
IE firfox 3.x+ opera chrome safari
该文章在 2013/8/16 9:22:08 编辑过
| |
全部评论5 |
|
admin
2013年8月16日 9:22
张金富 回答于 2011-07-18 14:07
举报
IE6、7、8都不支持，效果也不怎么样，不看好。
有帮助(0) 引用此评论
该评论在 2013/8/16 9:22:51 编辑过
|
|
admin
2013年8月16日 9:24
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(,
,
,
,
,
],
'padding' : 55,
'showValue' : true
}).render('canvas-wrapper');
饼型图item的数据结构是
Js代码
[]
text 比较项的名称
value 比较项的只,可以是Number或百分比型的
color 比较项的颜色(如果不特殊设定,使用默认颜色)
一个饼型图就这样生成了,简单不?
如果想要鼠标滑动凸出扇形,将focusEvent设置为mousemove即可
具体例子可以参见 http://everyjs.co.cc/demo.html#pie1
该评论在 2013/8/16 9:24:15 编辑过
|
|
admin
2013年8月16日 9:24
EveryChart教程(二)----柱形图
Chart.Bar柱形图(条形图),Chart.Line折线图,Chart.Stack堆积图还有Chart.Scatter分布图都是坐标图(Coord)的子类
他们的公共属性有
categories 比较项类别,如果同时设置了categories和categoryMax,categoryMin时,categories的优先级要大
categoryText 比较项类别名称
categoryRotation 比较项类别刻度名称的倾斜角度
categoryMax 比较项类别的最大值
categoryMin 比较项类别的最小值
categoryUnit 比较项类别间隔单位
valueText 数值项名称
valueRotation 数值项刻度名称的倾斜角度
valueMax 数值项最大值
valueMin 数值项最小值
valueUnit 数值项间隔单位
valueHalf 数值项间隔单位是否显示半刻度
grid 网格显示,如果为true同时显示水平线和垂直线,如果为h或horizon只显示水平线,如果为v或vertical只显示垂直线
这里主要讲一下柱形图的生成,如果要生成柱形图确切的说是坐标图,必须指定categories(或categoryMax,categoryMin,categoryUnit),valueMax,valueMin,valueUnit这些是构成2d坐标系的基本元素.
其中categoryMax>categoryMin valueMax>valueMin 如果count = (max-min)/unit的结果不是整数时,count会自动取>count的最小整数,也就是说在坐标轴显示的max要大于categoryMax(valueMax),这点用户只需要了解就可以
柱形图的item属性的数据结构是
Js代码
text 柱形比较组的名称
val1, val2, val3 表示同一组内比较项的数值
color 示柱的颜色,不是必填
柱形图的专有属性有
valueAxis 它表示对应的数值轴,默认值是y即表示y轴为数值轴, 当valueAxis为x时表示x轴为数值轴,也就是坐标轴倒置
Js代码
new Chart.Bar(,
,
],
'categories':['2009','2010','2011','2012'],
'valueMax' : 110,
'valueMin' : 10,
'valueUnit' : 10
}).render('canvas-wrapper');
生成的图标为
下图为设置了valueAxis:x
生成的是横向柱形图,也就是条形图
该评论在 2013/8/16 9:24:42 编辑过
|
|
admin
2013年8月16日 9:25
李永波 回答于 2011-08-30 11:29
举报
不错 太漂亮了
有帮助(0) 引用此评论
浩安 回答于 2012-11-19 16:36
举报
结合ZK框架该怎么使用，有人用过吗，给我发个完整Demo，569114553@qq.com，谢谢各位大侠
欢迎回话.
该评论在 2013/8/16 9:25:10 编辑过
|
|
admin
2013年8月16日 9:25
everychart 到底怎么用啊，可以提供一个demo的html文件么
@兔宝宝 你好，想跟你请教个问题：
你的everychart看起来很不错的样子，但是到底是怎么用的啊，我一直看不到图表显示。可以给一个html的demo么？<html>
<head>
<meta http-equiv=content-type content=text/html; charset=UTF-8 />
<title>测试页面-----d-</title>
<script src=Chart.js>
</script>
</head>
<body>
<script type=application/javascript>
var pie = new Chart.Pie(,
,
,
,
,
],
'padding' : 55,
'showValue' : true
}).render();
</script>
</body>
</html>
该评论在 2013/8/16 9:25:46 编辑过
|
|
|
400 186 1886
