JS数据统计表 highcharts.js的运用

参考地址 http://www.runoob.com/highcharts/highcharts-column-basic.html

1、下载JS文件引入，或者用CDN

    function getCount(a,b,c){
        $.ajax({
            type:'get',
            dataType:'json',
            url:'${path}/count/queryCountDetail',
            data:{
                webPageId:a,
                startDate:b,
                endDate:c
            },
            success:function(data){
                console.log(data)
                $('.webCount').html(data.info.readCountPv)
                $('.webCount1').html(data.info.readCountUv)
                $('.adverCount').html(data.info.clickCountPv)
                $('.adverCount1').html(data.info.clickCountUv) 
                var clicklist=[]
                var readlist=[]
                var sharelist=[]
                var titlelist=[]
                for(var i=0;i<data.info.list.length;i++){
                    clicklist.push(data.info.list[i].clickcount)
                    readlist.push(data.info.list[i].readcount)
                    sharelist.push(data.info.list[i].sharecount)
                    titlelist.push(data.info.list[i].title)
                }
                countShow(clicklist,readlist,sharelist,titlelist)  //遍历出来的数组
            }
        }) 
    }
    function countShow(a,b,c,d){
              var chart = {
                  type: 'column'
               };
               var title = {
                  text: '流量统计'   
               };
               var subtitle = {
                  text: ''  
               };
               var xAxis = {
                  /* categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], */
                  categories:d,
                  crosshair: true
               };

               var tooltip = {
                  headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                  pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                     '<td style="padding:0"><b>{point.y:.1f} 次</b></td></tr>',
                  footerFormat: '</table>',
                  shared: true,
                  useHTML: true
               };
               var plotOptions = {
                  column: {
                     pointPadding: 0.2,
                     borderWidth: 0
                  }
               };  
               var credits = {
                  enabled: false
               };
               
               var series= [                
                   {
                        name: '点击量 ',
                        data: a
                        //data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6, 92.3] 
                    }, {
                        name: '阅读量 ',
                        data:b
                        /* data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2] */
                    }, {
                        name: '分享量 ',
                        data:c
                        /* data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1] */
               }];     
                  
               var json = {};   
               json.chart = chart; 
               json.title = title;   
               json.subtitle = subtitle; 
               json.tooltip = tooltip;
               json.xAxis = xAxis;
//               json.yAxis = yAxis;  
               json.series = series;
               json.plotOptions = plotOptions;  
               json.credits = credits;
               $('#countForm').highcharts(json);
    }