数据统计图表-CSDN博客

首先引用4个JS

<script src="__PUBLIC__/Member/api/js/count/jquery-1.9.1.min.js"></script>
<script src="__PUBLIC__/Member/api/js/count/highcharts.js"></script>
<script src="__PUBLIC__/Member/api/js/count/exporting.js"></script>
<script type="text/javascript" src="__PUBLIC__/Member/api/js/count/grouped-categories.js"></script>

然后在页面上写相应的方法

$(function() {
    
    var count=[{$count}];   //从后台传上来的X轴
    
    var number=[{$number}]; //从后台传上来的Y轴
    

    
    $('#container').highcharts({

        chart: {
            type: ''
        },
        title: {
            text: ''
        },
        credits: {
            text: ''
        },
        xAxis: {

            labels: {
                rotation: 10,   //底下字的倾斜度
                
                style: {
                    color: '#6D869F',       //底下字的颜色
                    fontWeight: 'bold'      //底下字的字体
                }
            },
            
            //传值过来的
            categories:count,
            //原版 正式使用要用上面的那种 这只是告诉他要的值是什么样子的
            categories: ['2014年1月', '2014年2月', '2014年3月', '2014年4月', '2014年5月', '2014年6月', '2014年7月', '2014年8月', '2014年9月', '2014年10月', '2014年11月', '2014年12月'],
            
        },
        yAxis: {
            min: 0,
            title: {
                text: '项次'   //最右侧的文字
            }
        },
        tooltip: {
        
            formatter: function() {
                                    
                return '<b>'+ this.x +'</b><br/>'+
                    this.series.name +': '+ this.y +'<br/>'
                    //+'Total: '+ this.point.stackTotal;
                
            }
        },
        plotOptions: {
            column: {
                //stacking: 'normal',
                pointPadding: 0,
                borderWidth: 0
            }
        },
        series: [
        {
            name: '所有',
            type: 'column',  //柱子图
            color: 'blue',
            
             //传值过来的
            data: number
             //原版 正式使用要用上面的那种 这只是告诉他要的值是什么样子的
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]

        },
        {
            name: '所有',
            type: 'column',
            color: 'red',
            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: '所有',
            type: 'line',   //折线图
            color: 'red',
            //linkedTo : 'previous',
            data: number

        }]
    });
});

</script>

现在在要使用这个玩意的页面上放上你的div

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

好了现在就能出现

最后附上我控制器里的要传的值

$ModularLogic = D('DataModular','Logic');
            
            //X轴用的文字
            
            $set = $ModularLogic->field("name")->select();
            
            $ss="";
            
            foreach ($set as $key => $value)
            {
            
                $ss.="'".$value['name']."',";
            }
            
            substr($ss,0,strlen($ss)-1);
            
            $this->assign('count',substr($ss,0,strlen($ss)-1));
            
            //因为可能会涉及到时间 所以接个值 用来查询
            
            $times=I('post.datepicker');
            
            if($times==null)
            {
                $Ttime=date("Y-m-d",time());
                
                $time = strtotime($Ttime);
                
                $this->assign('time',$Ttime);

            }
            else 
            {
                $time = strtotime($times);
                
                $this->assign('time',$time);
            }    


            
            
            
            //用刚才接到的那个时间进行y轴值的查询
            
            $DataLogic = D('WeilianmengData','Logic');
            
            $sets = $ModularLogic->field("keyword")->select();
            
            foreach ($sets as $key => $value)
            {
                $where['type'] = array('like','%'.$value["keyword"].'%');
                    
                $where['time'] = $time;
                    
                $where['uid'] = UID;
            
                $se[$key] = $DataLogic->where($where)->field("count")->select();
                    
            }
            
          foreach ($se as $key => $value)
            {
                if($value[0]['count']!=null)
                {
                    $as.="".$value[0]['count'].",";
                }
                else 
                {
                    $as.="0,";
                }    
                
            }
            
            
            substr($as,0,strlen($as)-1);
            
            
            $tnumber= substr($as,0,strlen($as)-1);

            $this->assign('number',$tnumber);
            
             $this->display();

Js分享：

https://yunpan.cn/crETSIL45CJGI 访问密码 72ee

转载于:https://my.oschina.net/HazelKm/blog/606937