Highcharts使用jsonp格式数据demo
|
<html> <head> <title>Highcharts Example</title> <script type="text/javascript"src="/js/jquery-1.71.min.js"></script> <script type="text/javascript"src="/js/Calendar3.js"></script> </head> <body> <scripttype="text/javascript"> var ShowAjaxDate = { init: function(begin,end) { this.begin = begin; this.end = end; this.getNewBuy(); }, getNewBuy: function() { var _this = this; var param = { begin: this.begin, end: _this.end, callback:'ShowAjaxDate.setAjaxDate' }; $.ajax({ url: '/manage/newcustomflowquery.jsonp', data: param, dataType: 'script', success: function(r) { } }); }, setAjaxDate: function(r) { var allVisits = []; var showitem1="下单量"; var pvVisitors = []; var showitem2="pv"; var uvVisitors = []; var showitem3="uv"; var datetime = []; for(i=0;i< r.listCustomFlowQuery.length;i++) { allVisits.push(r.listCustomFlowQuery[i].onlProNum); pvVisitors.push(r.listCustomFlowQuery[i].pv); uvVisitors.push(r.listCustomFlowQuery[i].uv); datetime.push(r.listCustomFlowQuery[i].dateTime); } var options = { chart: { renderTo: 'container', type: 'line' }, title: { text: 'Monthly AverageTemperature' }, subtitle: { text: 'Source: WorldClimate.com' }, exporting:{ enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示 }, credits: { enabled: false }, xAxis: { categories: [] }, yAxis: { title: { text: '次数' } }, legend: { align: 'left', verticalAlign: 'top', x: 60, y: 10, floating: true, borderWidth: 0 }, tooltip: { shared: true, crosshairs: true }, 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('%A,%b %e,%Y',this.x)+':<br/> '+ this.y +' visits', width:200 }); } } }, marker: { lineWidth: 1 } } }, series: [{ },{ },{ }] }; options.xAxis.categories=datetime; options.series[0].name = showitem1; options.series[1].name = showitem2; options.series[2].name = showitem3; options.series[0].data = allVisits; options.series[1].data = pvVisitors; options.series[2].data = uvVisitors; var chart = new Highcharts.Chart(options); } }; </script> <div style="text-align:center;margin: 0 auto"> <span>选择查询日期：</span> <span>从 <inputname="control_date" type="text" id="control_date"size="10" maxlength="10" onclick="new Calendar().show(this);"readonly="readonly" /> </span> <span>至 <inputname="control_date2" type="text"id="control_date2" size="10" maxlength="10" onclick="new Calendar().show(this);"readonly="readonly"/> </span> <input type="button" name="button"id="button" value="查询"onclick="getUrlShowData();" /> <script> function getUrlShowData() { var begin = document.getElementById("control_date").value; var end = document.getElementById("control_date2").value; ShowAjaxDate.init(begin,end); } </script> </div> <script src="/js/highcharts.js"></script> <scriptsrc="/js/modules/exporting.js"></script> <div id="container"style="min-width: 400px; height: 400px; margin: 0auto"></div> </body> </html>
欢迎大家指正。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |