[发布]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 技术,
其中展现图表所需的flash 来自 YahooUI 的 chart 模块.
js部分大量借鉴了 ExtJS 3.0 里的chart模块
依赖于 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>

在页面加载之后的某个时刻 执行:

yc.render("pie");  //参数为 div 的id.

具体的看附件中的demo.html示例吧

截图如下:

评论

5 楼 fins 2010-06-13  

guofengcn 写道

demo直接点开我这不能看见效果呢？……怎么运行？

解压后 运行demo.html即可
如果不能运行 看看是不是你的浏览器设置了不允许本地运行flash 或者是flash版本问题.

4 楼 guofengcn 2010-06-12  

demo直接点开我这不能看见效果呢？……怎么运行？

3 楼 luolonghao 2010-05-27  

我用过YUI2的chart和open flash chart，YUI2的chart不如open flash chart好用。

2 楼 fins 2010-05-27  

FusionCharts 绝对没有 yahooUI的chart 好.

我做的不是封装 只是精简.

如果你的系统不使用yahooui 或者是ext  但是却想使用客户端flash图表

不妨一试哦

1 楼 jkfzero 2010-05-27  

来顶你一下，不过越来越感觉这种封装的意义不大了。现在开发的各种细枝末节都有专业的解决方案了，比如FusionCharts，Google Chart之类。