highcharts项目笔记-通过Ajax json数据绘制图表

一、highcharts点击事件获取点击点的值

chart = new Highcharts.Chart({ plotOptions: { series: { cursor: 'pointer', events: { click: function(e) { alert(e.point.category); } } } },

从代码中可以看出e.point就是点击事件所获得的点击点的对象。category是对应的x轴的值，也可以获得y轴对应的值等。

当然，如果需要更复杂的操作，可以参考API的复杂功能：http://www.highcharts.com/demo/line-ajax

二、默认只加载一条曲线

在一个图像中有多条曲线，但是默认想只显示第一条曲线，则需要做如下设置即可：

chart: {

renderTo: 'plans',

type: 'line',

events: {

load: function (event) {

for (var i = this.series.length - 1; i > 0; i--) {

this.series[i].hide(); //设置只显示第一条线，其他都不显示

}

}

}

}

三、去掉highcharts网站url

采用highcharts绘图，右下角默认会有一个其网站url存在，这会影响美观，只需做如下设置即可去掉：

credits: {

enabled: false //去掉highcharts网站url

}

四、动态增加曲线数量

如需在显示曲线后动态增加显示曲线条数，只需如下操作即可：

var chart = new Highcharts.Chart(options);

chart.addSeries({

name: '合计',

data: [61, 63, 65, 67, 69, 71, 73, 70, 67, 64, 61, 57]

});

或



chart.addSeries({ name: 'DataURL serie', dataURL: 'serie3.txt' });

五、动态删除曲线

chart.series[0].remove();

六、动态改变曲线数据

参考：http://jsfiddle.net/jlbriggs/XQu8E/11/

模板代码

<{include file="pageheader.tpl"}>

<div class="wrap">

<div class="title" id='aa'><strong class="l">数据报表</strong> <span class="relative r"> <a class="buttons4" href="?c=ptd&a=daily1133i&line=&r=<{$rand}>"><font>查看报表数据</font></a></span> </div>

<div class="oper">

<form method="GET" action="" name="sear" class="form-inline" onsubmit="dovalidate();">

<input type="hidden" name="c" value="ptd" />

<input type="hidden" name="a" value="daily1133i" />

<input type="hidden" name="line" value="1" />

<input type="hidden" name="timestart" id="timestart" value="" />

<input type="hidden" name="timeend" id="timeend" value="" />

<label for="">选择时间</label>

<div class="relative"> <a class="time" href="javascript:void(0);" onclick="timet('time','timecolse');closeWin();"><span><font id="start" name="start"><{if $start_date == ''}>开始时间<{else}><{$start_date}><{/if}></font><font id="middle">-</font><font id="end"
name="end"><{if $start_date== ''}>结束时间<{else}><{$end_date}><{/if}></font></span></a>

<div class="timetxt" id="time"> <span> <a href="javascript:void(0)" id="aid1" onclick="searchTimeFlag(0);" style="margin-left:0px">今日</a>|<a href="javascript:void(0)" id="aid2" onclick="searchTimeFlag(1);">昨日</a>|<a href="javascript:void(0)" id="aid3"
class="on_choose" onclick="searchTimeFlag(7);">近7日</a>|<a href="javascript:void(0)" id="aid4" onclick="searchTimeFlag(30);">近30日</a> |

<select id="selectMonth" class="span1" onchange="selectMonthf();">

<option value="2012-12" id="2012-12">12月</option>

<option value="2012-11" id="2012-11">11月</option>

<option value="2012-10" id="2012-10">10月</option>

<option value="2012-9" id="2012-9">9月</option>

<option value="2012-8" id="2012-8">8月</option>

<option value="2012-7" id="2012-7">7月</option>

<option value="2012-6" id="2012-6">6月</option>

<option value="2012-5" id="2012-5">5月</option>

<option value="2012-4" id="2012-4">4月</option>

<option value="2012-3" id="2012-3">3月</option>

<option value="2012-2" id="2012-2">2月</option>

<option value="2012-1" id="2012-1">1月</option>

</select>

| <a href="javascript:void(0)" id="aid5" onclick="searchTimeFlag(99);">全部</a> </span>

<p>自定

<input type="text" id="startTime" name="startTime" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-M-dd',minDate:'2011-12-25',maxDate:'#F{$dp.$D(\'endTime\')||\'%y-%M-%d\'}'})">

到

<input type="text" id="endTime" name="endTime" class="Wdate" onclick="WdatePicker({dateFmt:'yyyy-M-dd',minDate:'#F{$dp.$D(\'startTime\')||\'2011-12-25\'}',maxDate:'%y-%M-%d'})">

</p>

<span style="display:block"><small id="datamessage" class="l">日期不能为空</small><a href="#" class="timecolse r" onclick="closeWin();"><img src="static/img/no.jpg"></a><a href="javascript:void(0);" onclick="searchTimeFlag(6);" id="aidyes" class="r"><img
src="static/img/yes.jpg"></a> </span> </div>

</div>

<input type="submit" value="查询" class="btn" />

</form>



<script>

function dovalidate(){

document.getElementById("timestart").value=document.getElementById("start").innerHTML;

document.getElementById("timeend").setAttribute('value',document.getElementById("end").innerHTML);

}

</script>

</div>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script type="text/javascript">

$(function () {

// define the options

var options = {

chart: {

renderTo: 'container',

type: 'line',

events: {

load: function (event) {

for (var i = this.series.length - 1 - 1; i > 0; i--) {

this.series[i].hide(); //设置只显示第一条线，其他都不显示

}

}

}



},

title: {

text: '飞流游戏中心iOS日报表——数据走势图',

margin: 15

},

subtitle: {

text: ''

},

xAxis: {

type: 'datetime',

tickInterval: 7 * 24 * 3600 * 1000, // one week

tickWidth: 0,

gridLineWidth: 1,

labels: {

align: 'left',

x: 3,

y: -3

}

},

yAxis: [{ // left y axis

title: {

text: null

},

labels: {

align: 'left',

x: 3,

y: 16,

formatter: function() {

return Highcharts.numberFormat(this.value, 0);

}

},

showFirstLabel: false

}, { // right y axis

linkedTo: 0,

gridLineWidth: 0,

opposite: true,

title: {

text: null

},

labels: {

align: 'right',

x: -3,

y: 16,

formatter: function() {

return Highcharts.numberFormat(this.value, 0);

}

},

showFirstLabel: false

}],

legend: {

/*

align: 'left',

verticalAlign: 'top',

y: 320,

floating: true,

borderWidth: 0

*/

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -10,

y: 70,

borderWidth: 0,

itemMarginTop: 5,

itemMarginBottom: 5

},

tooltip: {

shared: true,

crosshairs: true,

style: {

}

},

plotOptions: {

series: {

cursor: 'pointer',

point: {

events: {

click: function() {

hs.htmlExpand(null, {

pageOrigin: {

x: this.pageX,

y: this.pageY

},

headingText: this.series.name,

maincontentText: Highcharts.dateFormat('%Y, %b %e, %Y', this.x) +':<br/> '+

this.y +' visits',

width: 200

});

}

}

},

marker: {

lineWidth: 1

}

}

},

credits: {

enabled: false //去掉highcharts网站url

},

series: [{

name: '新增用户数',

lineWidth: 4,

marker: {

radius: 4

}

}, {

name: '注册/绑定用户数'

}, {

name: '联网用户数'

}, {

name: '联网次数'

}, {

name: '联网老用户数'

}, {

name: '老用户联网次数'

}, {

name: '下载次数'

}, {

name: '下载人数'

}, {

name: '宏观留存率(%)'

}]

};

// Load data asynchronously using jQuery. On success, add the data

// to the options and initiate the chart.

// This data is obtained by exporting a GA custom report to TSV.

//GA = Google analytics 是谷歌公司的一款免费企业级分析软件，任何人都可以免费注册使用。软件的特点是电子商务功能。GA自定义报告

// http://api.jquery.com/jQuery.get/
var datestart = document.getElementById("start").innerHTML;

var dateend = document.getElementById("end").innerHTML;

jQuery.get('http://pmtest.feiliu.com/?c=ptd&a=chart_ajax_1133i', {timestart:datestart,timeend:dateend}, function(data, state, xhr) {

var records = [],

date,

// set up the data series

newUsers = [],

regUsers = [],

connUsers = [],

connTimes = [],

connUsersOld = [],

connTimesOld = [],

dlTimes = [],

dlUsers = [],

livePercentage = [];

// inconsistency

if (typeof data !== 'string') {

data = xhr.responseText;

}

// split the data return into lines and parse them

data = eval('(' + data + ')');

//alert(data);

jQuery.each(data, function(i, record) {

// all data records start with a double quote

date = record.thedate;

//alert(date);

newUsers.push([

date,

parseInt(record.new_user, 10)

]);

regUsers.push([

date,

parseInt(record.reg_user)

]);

connUsers.push([

date,

parseInt(record.conn_user)

]);

connTimes.push([

date,

parseInt(record.conn_time)

]);

connUsersOld.push([

date,

parseInt(record.conn_user_old)

]);

connTimesOld.push([

date,

parseInt(record.conn_times_old)

]);

dlTimes.push([

date,

parseInt(record.dl_time)

]);

dlUsers.push([

date,

parseInt(record.dl_user)

]);

livePercentage.push([

date,

parseInt(record.percentage)

]);

});

options.series[0].data = newUsers;

options.series[1].data = regUsers;

options.series[2].data = connUsers;

options.series[3].data = connTimes;

options.series[4].data = connUsersOld;

options.series[5].data = connTimesOld;

options.series[6].data = dlTimes;

options.series[7].data = dlUsers;

options.series[8].data = livePercentage;

$('#container').highcharts(options);

});

});

</script>

<script src="./static/highcharts/js/highcharts.js"></script>

<script src="./static/highcharts/js/modules/exporting.js"></script>

<!-- Additional files for the Highslide popup effect -->

<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide-full.min.js"></script>

<script type="text/javascript" src="http://www.highcharts.com/highslide/highslide.config.js" charset="utf-8"></script>

<link rel="stylesheet" type="text/css" href="http://www.highcharts.com/highslide/highslide.css" />

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

<{include file="pagefooter.tpl"}>

控制器文件中类pmc_ptd之函数定义：

public function chart_ajax_1133i(){

$datefrom = empty($_GET['timestart']) || ($_GET['timestart'] == '开始时间') ? date('Y-m-d',strtotime('-20 days')) : date('Y-m-d',strtotime($_GET['timestart']));

$dateto = empty($_GET['timeend']) || ($_GET['timeend'] == '结束时间') ? date('Y-m-d',strtotime(' ')) : date('Y-m-d',strtotime($_GET['timeend']));

$coopid = $_GET['coopid'] ? $_GET['coopid'] : '';

$edition = empty($_GET['version']) ? '' : $_GET['version'];

$data = mod_ptd::get_ptd_jsondata($datefrom, $dateto, $edition, $productid = 1133, $plat = 'i', $coopid);

$jsonencode = json_encode($data);

echo $jsonencode;

}