纯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);
                }
     }
  });
}