YESChart beta 1 --- 基于js和flash技术的纯客户端图表组件.
Copyright: (c) 2010 by fins ( http://fins.iteye.com twitter:@finscn )
License: BSD.
=================================
该组件基于 js 和 flash 技术,
其中[size=large][color=red]展现图表所需的flash 来自 YahooUI 的 chart 模块.
js部分大量借鉴了 ExtJS 3.0 里的chart模块[/color][/size]
依赖于 classy.js 和 swfobject.js 两个第三方组件.
( 名字中的 Y 代表YahooUI, E 代表ExtJS, S 代表Simple. )
该组件原创成分并不多 只是对现有技术做的一个整合 精简 以及修改.
请不要因为此原因而指责我(fins)抄袭 剽窃. 谢谢.
使用方法与参数设置 和ExtJS 3.0中的chart模块极其相似, 请参考ExtJS 3.0中的相关文档.
通常将文章中的 Ext. 换成 YESChart. 即可.
其中要特别注意的是, 对数据集的简化, Ext中有个store的概念,而本精简版直接使用json数组.
关于图表的更多设置细节 请参阅 YahooUI的chart.
======================================
使用方法的简单说明:
准备好数据 : 一个js数组,如下
定义好 chart对象 , 例如 饼图:
页面中有放一个div
在[color=red]页面加载之后的某个时刻 [/color]执行:
具体的看附件中的demo.html示例吧
截图如下:
[img]http://dl.iteye.com/upload/picture/pic/63775/f54db0e2-b701-31c4-950b-45d650c7ad24.png[/img]
Copyright: (c) 2010 by fins ( http://fins.iteye.com twitter:@finscn )
License: BSD.
=================================
该组件基于 js 和 flash 技术,
其中[size=large][color=red]展现图表所需的flash 来自 YahooUI 的 chart 模块.
js部分大量借鉴了 ExtJS 3.0 里的chart模块[/color][/size]
依赖于 classy.js 和 swfobject.js 两个第三方组件.
( 名字中的 Y 代表YahooUI, E 代表ExtJS, S 代表Simple. )
该组件原创成分并不多 只是对现有技术做的一个整合 精简 以及修改.
请不要因为此原因而指责我(fins)抄袭 剽窃. 谢谢.
使用方法与参数设置 和ExtJS 3.0中的chart模块极其相似, 请参考ExtJS 3.0中的相关文档.
通常将文章中的 Ext. 换成 YESChart. 即可.
其中要特别注意的是, 对数据集的简化, Ext中有个store的概念,而本精简版直接使用json数组.
关于图表的更多设置细节 请参阅 YahooUI的chart.
======================================
使用方法的简单说明:
准备好数据 : 一个js数组,如下
var testData= [{
season: '春',
castA : 100,
castB : 50,
total: 150
},{
season: '夏',
castA : 145,
castB : 100,
total: 245
},{
season: '秋',
castA : 77,
castB : 40,
total: 117
},{
season: '冬',
castA : 56,
castB : 128,
total: 184
}]
定义好 chart对象 , 例如 饼图:
var yc=new YESChart.chart.PieChart({
data : testData , //这里与之前定义好的数据关联.
//下面是一堆设置,这个情详细参考 Ext和YahooUI的文档.
swfWidth : 300,
swfHeight : 200,
dataField : 'total',
categoryField : 'season',
extraStyle : {
legend : {
display: 'bottom',
padding: 5,
font: {
size: 13
}
}
}
})
页面中有放一个div
<div id="pie"></div>
在[color=red]页面加载之后的某个时刻 [/color]执行:
yc.render("pie"); //参数为 div 的id.
具体的看附件中的demo.html示例吧
截图如下:
[img]http://dl.iteye.com/upload/picture/pic/63775/f54db0e2-b701-31c4-950b-45d650c7ad24.png[/img]