纯Javascript图表 Highcharts

Highcharts是一个制作图表的纯Javascript类库，主要特性如下：

• 兼容性：兼容当今所有的浏览器，包括iPhone、IE和火狐等等；
• 对个人用户完全免费；
• 纯JS，无BS；
• 支持大部分的图表类型：直线图，曲线图、区域图、区域曲线图、柱状图、饼装图、散布图；
• 跨语言：不管是PHP、Asp.net还是Java都可以使用，它只需要三个文件：一个是Highcharts的核心文件highcharts.js，还有a canvas emulator for IE和Jquery类库或者MooTools类库；
• 提示功能：鼠标移动到图表的某一点上有提示信息；
• 放大功能：选中图表部分放大，近距离观察图表；
• 易用性：无需要特殊的开发技能，只需要设置一下选项就可以制作适合自己的图表；
• 时间轴：可以精确到毫秒；

必需品：

JQuery,

Mootools（一个简洁，模块化，面向对象的开源JavaScript web应用框架）

Prototype （Sam Stephenson写的一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax，国内外有多个基于此类库实现的效果库，也做得很棒。每个函数（Function）就是一个对象，函数对象都有一个子对象 prototype对象，类是以函数的形式来定义的。prototype表示该函数的原型，也表示一个类的成员的集合。）

资料：

1.http://www.highcharts.com/studies/

例：

//展现出柱状图

var chart;

function showChart(){
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
title: {
text: '用户统计图表'
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: '已注册用户数'
}
},
series: []
};
var chooseUrl="<%=request.getContextPath()%>/User/showChartUser.action";
var bYear=$("#bYear").val();
var bMonth=$("#bMonth").val();
var eYear=$("#eYear").val();
var eMonth=$("#eMonth").val();
$.ajax({
url: chooseUrl,
async:false,
dataType:"json",
type:"post",
data:{"bYear":bYear,"bMonth":bMonth,"eYear":eYear,"eMonth":eMonth,"rd":Math.random()},
success:function(data){
var month;
var amount;
for (var key in data){
var test=data[key].test;
var l=data[key].list;

for(var i=0 ;i<l.length;i++){
options.xAxis.categories.push(l[i].stratdate);
}
for(var n=0 ;n<4;n++){
var series = {
data: []
};
var dataU;
if(n==0){
series.name = "成员馆";
}
if(n==1){
series.name = "代理商";
}

for(var i=0 ;i<l.length;i++){
if(n==0){
dataU=l[i].librarytotle;
}
if(n==1){
dataU=l[i].agenttotle;
}


series.data.push(dataU);
}
options.series.push(series);
}
var chart = new Highcharts.Chart(options);
}
}
});
}