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

发布时间：2020-12-15 20:59:32 所属栏目：百科来源：网络整理

导读：一、highcharts点击事件获取点击点的值 chart = new Highcharts.Chart({ plotOptions: { series: { cursor: 'pointer',events: { click: function(e) { alert(e.point.category); } } } },从代码中可以看出e.point就是点击事件所获得的点击点的对象。category

一、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,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',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 },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,showFirstLabel: false }],legend: { /* align: 'left',verticalAlign: 'top',y: 320,floating: true,borderWidth: 0 */ layout: 'vertical',align: 'right',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>  <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; }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!