首页 > 代码库 > highcharts与ajax的应用
highcharts与ajax的应用
整理一份完整的例子，以供参考：
<1>页面chart.html：
<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>highchart折线图</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script src="highcharts.js"></script> <script type="text/javascript"> var xset = [];//X轴数据集 var yset = [];//Y轴数据集 /*返回数据*/ function getData(){ $.getJSON(‘com/ChartServlet‘,function(data){ $.each(data,function(i,item){ $.each(item,function(k,v){ xset.push(k); yset.push(v); }); }) console.log(xset); console.log(yset); //根据时间序列生成折线图 showChart(xset,yset); }); } /*定义图表*/ function showChart(xset,yset){ var chart = new Highcharts.Chart({ chart: { renderTo: ‘linecontainer‘, type: ‘line‘, marginRight: 130, marginBottom: 25 }, xAxis: { categories: xset }, yAxis: { title: { text: ‘数据‘ }, plotLines: [{ value: 0, width: 1, color: ‘#808080‘ }] }, tooltip: { formatter: function() { return ‘<b>‘+ this.series.name +‘</b><br/>‘+ this.x +‘: ‘+ this.y; } }, legend: { layout: ‘vertical‘, align: ‘right‘, verticalAlign: ‘top‘, x: -10, y: 100, borderWidth: 0 }, series: [{ name: ‘随机时间序列‘, data: yset }] }); } //执行 getData(); </script> </head> <body> <!-- 图表显示区 --> <div id="linecontainer" style="width: 1200px; height: 300px"></div> </body> </html></span>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。