JS生成折线图
2016-05-04 10:08
274 查看
引入文件:
生成部分代码:
ajax请求部分代码:
<script type="text/javascript" src="__PUBLIC__/js/highcharts.js"></script> <script type="text/javascript" src="__PUBLIC__/js/exporting.js"></script>
生成部分代码:
<div id="container" style="width: 1000px;height: 400px"></div> //点击查询执行函数。ajax清求得到数据 function charts_list(){ $("#container").html("正在加载...."); $.ajax({ type:'GET', url :'{:U("AdLog/charts_list")}', data: $("#chart_searchform").serialize(), dataType:'json', success:function(data){ if(data.code == 0){ artDialog.tips("出错,请重试!"); }else{ var data_list = data['data']; var chart; var options = { chart: { renderTo: 'container', type: 'line', marginRight: 50, marginBottom: 42 }, title: { text: null, x: -20 //center }, xAxis: { labels:{ x:0,//调节x偏移 y:25,//调节y偏移 rotation:80//调节倾斜角度偏移 }, }, yAxis: { title: { text: '浏览情况' }, min :0, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function() { return '' + this.x +'日浏览量: '+ this.y ; } }, exporting:{ enabled:false },//去掉下载和打印 credits: { enabled: false }, //去掉右下角官网图标 legend: { layout: 'vertical', align: 'right', verticalAlign: 'top', x: 0, y: 0, borderWidth: 0, floating: true }, series: [] } options.series = new Array(); var i_length = data_list.length; var data_val = new Array; var date = new Array; var chart_sum_pv_msg = 0; options.series[0] = new Object(); options.series[0].name = '浏览量'; for(var i=0;i<i_length;i++){ data_val[i] = parseFloat(data_list[i]['click_cnt_count']); chart_sum_pv_msg += Number(data_list[i]['click_cnt_count']); date[i] = '"'+[data_list[i]['pv_date']]+'"'; } $("#chart_sum_pv_msg").html("总浏览量:"+chart_sum_pv_msg); options.series[0].data = data_val; options.xAxis['categories'] = date; chart = new Highcharts.Chart(options); } } }); }
ajax请求部分代码:
public function charts_list(){ if(empty($_GET['url'])){ $code = array( 'data' => '', 'code' => 1, ); }else{ if(!$_GET['time_start'] && !$_GET['time_end']){ $_GET['time_start'] = date('Y-m-d', strtotime('-30 day')); $_GET['time_end'] = date('Y-m-d'); } $this -> queryFormater(); $count = M('ad_click')->where($this->_query)->count(); $pager = new \Think\Page($count, $this->_page_size); $list = M('ad_click')->field('ad_id,sum(ip_cnt) as ip_cnt_count,sum(click_cnt) as click_cnt_count,pv_date')->group("pv_date asc")->where($this->_query)->order('pv_date asc')->select(); $st_time = $_GET['time_start']; $en_time = $_GET['time_end']; if(empty($_GET['time_start'])){ $st_time = $list[0]['pv_date']; } if(empty($_GET['time_end'])){ $en_time = $list[count($list) - 1]['pv_date']; } $charst_list = $this->date_maker($st_time, $en_time, $list); $code = array( 'data' => $charst_list, 'code' => 100, ); } echo (json_encode($code)); exit; } /** * 生成时间 * Enter description here ... * @param date $startDate * @param date $endDate */ public function date_maker($startDate, $endDate, $data){ $dayArr = array(); $endts = strtotime($endDate); $startts = strtotime($startDate); $countDate = ($endts-$startts)/3600/24; $url_item = $data[0]['ad_id']; for($i = 0;$i <= $countDate;$i++){ $dateArr = array( 'url' => $url_item, 'click_cnt_count' => 0, 'pv_date' => date('m-d', $startts+$i*24*3600), ); $dayArr[$dateArr['pv_date']] = $dateArr; } $replace = array(date('Y-'), (date('Y') - 1)."-"); $dataDayArr = array(); foreach($data as $loop){ $moth = str_replace($replace, "", $loop['pv_date']); $loop['pv_date'] = $moth; $dataDayArr[$moth] = $loop; } return array_values(array_replace($dayArr, $dataDayArr)); } protected function queryFormater(){ //信息id if(I('url', 0)){ $this->_query['ad_id'] = I('url'); } //信息页面 if(I('ad_p', 0)){ $this->_query['ad_p'] = I('ad_p'); } //操作时间 if(I('time_start', '') != '' && I('time_end', '') != ''){ $this->_query['pv_date'] = array( array('egt', I('time_start')), array('elt', I('time_end')) ); }elseif(I('time_end', '') != ''){ $this->_query['pv_date'] = array('elt', I('time_end')); }elseif(I('time_start', '') != ''){ $this->_query['pv_date'] = array('egt', I('time_start')); } }
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因
- Canvas 在高清屏下绘制图片变模糊的解决方法
- Redux系列02:一个炒鸡简单的react+redux例子
- JavaScript 各种遍历方式详解
- call/apply/bind 的理解与实例分享