[发布]YESChart beta 1 --- 基于js和flash技术的纯客户端图表组件.

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数组,如下

	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]