您的位置:首页 > Web前端 > JavaScript

JS生成折线图

2016-05-04 10:08 274 查看
引入文件:

<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'));
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript