各种语言都有很多 关于chart的api、例如java的jfreechart 等。。。
由于单位的业务需要、需要在前台使用jquery生成相关的图标
所以最近找到了一个jgcharts.pack.js来处理业务。
美中不足的是 jgcharts 不支持 ie6 [ie7 ie8 还没有测试]
虚拟需求1:分析年龄段在 20-30 40-50 50-60 年龄范围的客户群体饼形图。
虚拟数据位
20-30 7400人
30-40 5000人
40-50 3000人
50-60 1200人
具体代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<script src="../../lib/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="../../jgcharts.pack.js" type="text/javascript"></script>
<script>
var api = new jGCharts.Api();
jQuery('<img>')
.attr('src', api.make({
axis_labels : ['20岁-30岁','30岁-40岁','40岁-50岁','50岁-60岁'],
data : [[7400], [5000], [3000], [1200]],
colors : ['f8b038'],
type : 'p3',//default bvg
size : '400x200',
title : '客户群体年龄范围数据分析'
})).appendTo("#bar1");
});
</script>
</head>
<body>
<div id="bar1"></div>
</body>
</html>