jquery插件 Highcharts 从后台动态去得数据如何在页面上显示？高手求解

Highcharts插件可以生成很多中图的不知道你说的是哪种
这个也是柱状图 x轴不是时间轴的  <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>柱状图像显示区域--X轴非时间轴</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="/Test/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/Test/js/highcharts.js"></script>
<script src="/Test/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<SCRIPT language=JavaScript src="/Inves/js/public.js"></SCRIPT>
<script type="text/javascript" src="/Test/js/exporting.js"></script>
<script src="/Test/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">

var chart;
var arry = new Arry("0-30","31-60","61-90","91-120","240以上");
$(document).ready(function() {
chart = new Highcharts.Chart({

chart: {
renderTo: 'container',
defaultSeriesType: 'column' // 类型为柱状图
},

title: {
text: 'Total fruit consumtion, grouped by gender'
},

xAxis: { // 设置x轴  非时间轴的
    type:'linear',
categories: arry
},

yAxis: { //设置y轴
allowDecimals: false,
min: 0,
title: {
text: ''
}
},

tooltip: {   //鼠标滑过图像时  出现浮动提示框
formatter: function() {
return '<b>'+ this.x +'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'总航班数: '+ this.point.stackTotal;
}
},

plotOptions: {
column: {
stacking: 'normal'  //柱状图形上下罗在一起
}
},

    series: [{
        type: 'column',
name: '进港',
data: [5, 3, 4, 7, 2],
stack: 'male'
//color: '#3E7CC8'
}, {
    type:'column',
name: '出港',
data: [3, 4, 4, 2, 5],
stack: 'male'
//color:'#FFCC00'
}, {
    type:'scatter',
name: '重要架次',
data: [2, 5, 6, 2, 1],
stack: 'female'
//color:'#FF0000'
}]
});

});

</script>  </head>

  <body>
     <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
  </body>
</html>

你可以在网上搜一搜网上资料还是挺多的到官网上http://www.highcharts.com看看上面有各种图形的很多例子

这个也是柱状图 x轴是时间轴的  <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>柱状图-x轴为时间轴</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="/Test/js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/Test/js/highcharts.js"></script>
<script src="/Test/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<SCRIPT language=JavaScript src="/Inves/js/public.js"></SCRIPT>
<script type="text/javascript" src="/Test/js/exporting.js"></script>
<script src="/Test/js/jquery-ui-1.8.6.custom.min.js" type="text/javascript"></script> <link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/content.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/Inves/css/CAAC.css" />
<link rel="stylesheet" type="text/css" href="/Inves/css/drag.css" />
<link href="/Inves/css/flightListDialog.css" rel="stylesheet" type="text/css" />
<link href="/Inves/css/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
        var chart;
        var now = new Date();//当前时间
var year = now.getFullYear();//年
var month = fixTime(now.getMonth()+1);//月
var day = fixTime(now.getDate());//日
var hour = now.getHours();//小时
var minute = now.getMinutes();//分钟
var intervalTime = 120;//  时间间隔 120、60、30分钟
var capacity = 0;

$(document).ready(function() {
chart = new Highcharts.Chart({

chart: {
renderTo: 'container',  //所设置图形的容器
defaultSeriesType: 'column', // column：类型为柱状图   pie：类型为饼状图
margin: [20,30,60,50]  //这个参数是设置什么的呢？？？图表外缘与图表绘图区边缘的距离
},

title: {
text: ''
},

xAxis: { // 设置x轴  时间轴的
type:"datetime",  // 如果要用时间轴则要加上这个type:"datetime"，默认是linear

//maxpadding:0.05,
//minPadding:0.05,
tickInterval: intervalTime*60*1000, // 设置时间轴的间隔刻度（也就是每刻度的间隔时间）以毫秒计算此处是间隔1小时如果是半小时则是30*60*1000 2小时：120*60*1000
//gridLineWidth :1,    //默认是0，即在图上没有纵轴间隔线
tickColor: '#000000', // 设置刻度线的颜色

lineColor:'#898989',
lineWidth:2,

dateTimeLabelFormats:{
    second: '%H:%M:%S',
minute: '%H:%M',
hour: '%H:%M',
day: '%e. %b',
week: '%e. %b',
month: '%b %y',
year: '%Y'
}
},

yAxis: { //设置y轴样式
allowDecimals: false, // 默认的是true，即可以在y轴上出现小数  false：y轴不可以出现小数
min: 0,
lineWidth:2,
lineColor: '#898989',
minorTickInterval: 'auto',// y轴样式网格的形式
title: {
text: ''
}
},

        legend: { //设置X轴下方的图形
spline: {   //  spline这个属性目前还不知道是干嘛的
lineWidth: 4,
states: {
hover: {
lineWidth: 5
}
},
er: {
enabled: false,
states: {
hover: {
enabled: true,
symbol: 'circle',
radius: 5,
lineWidth: 1
}
}
}

},
enabled: true, // 是否显示X轴下方的图形 true：显示默认是true

style: {
left: 'auto',
bottom: 'auto',
right: 'auto',
top: 'auto'
},

floating: true,   // 默认的是false   true：x轴下方的图形浮在 x、y轴中的图像上
backgroundColor: '#FFFFFF', // 设置该部分图形的背景色
borderColor: '#CCC',  //    设置该部分图形的边缘线的颜色
borderWidth: 1,      //     设置该部分图形的边缘线的宽度
shadow: false
},

tooltip: {   //鼠标滑过图像时  出现浮动提示框
formatter: function() {
  var showText ="";
  if(intervalTime==120){
  var hm = Highcharts.dateFormat('%H:%M',this.x);// 取得当前位置对应X时间轴的时间（小时：分钟）格式：01:00
  var m = Highcharts.dateFormat('%M',this.x); // 取得当前位置对应X时间轴的时间（分钟）格式：30
  var hour = Highcharts.dateFormat('%H',this.x);// 取得当前位置对应X时间轴的时间（小时）格式：30
  var hourStr = (parseInt(hour,10)-1).toString();
  hourStr = fixTime(hourStr)+":00";

  showText =  '<b>'+'时间：'+ hourStr+'~'+Highcharts.dateFormat('%H:59',this.x)+'</b><br/>'+
this.series.name +': '+ this.y +'<br/>'+
'总航班数: '+ this.point.stackTotal+'<br/>'+
  '当前位置对应X轴的时间（时分）：'+hm+'<br/>'+
  '当前位置对应X轴的时间（分钟）：'+m+'<br/>'+
  '当前位置对应X轴的时间（小时）：'+hour;
  }
return showText;
}
},

plotOptions: {
column: {
stacking: 'normal'  //柱状图形上下罗在一起
},
line: {
//不显示线性图上的图标
er: {
                 enabled: false
            }

}
//若需要设置 clinck的触发事件  则在这里需要设置series: {
                                       // cursor: 'pointer',
                                                    // point: {
                                                       // events: {
                                                       // click: function() {
},

    series: [{
        type: 'column',
name: '进港',
pointInterval: 60 * 60 * 1000,
             pointStart: Date.UTC(year, month, day, 0, 0, 0),// 时间格式：年、月、日、时、分、秒
data: [[Date.UTC(2010,12,22, 1, 0, 0),50],[Date.UTC(2010,12,22, 3, 0, 0),29],[Date.UTC(2010,12,22, 5,0, 0),51]
      ,[Date.UTC(2010,12,22, 7, 0, 0),59],[Date.UTC(2010,12,22, 9, 0, 0),36],[Date.UTC(2010,12,22, 11, 0, 0),68]
      ,[Date.UTC(2010,12,22,13, 0, 0),29],[Date.UTC(2010,12,22, 15, 0, 0),51]
      ,[Date.UTC(2010,12,22, 17, 0, 0),59]],// 数据格式以这种形式出现
//其中一条数据：[Date.UTC(2010,12,22, 3, 30, 0),59] 其中：Date.UTC(2010,12,22, 0, 30, 0)是设置数据在X时间轴上显示的位置
//   1）X轴刻度间隔是2小时  此时设置数据在X时间轴上显示的位置应该为：Date.UTC(2010,12,22, 1*n, 0, 0)   n为奇数
//   2）X轴刻度间隔是1小时  此时设置数据在X时间轴上显示的位置应该为：Date.UTC(2010,12,22, 0, 30, 0)
//   3）X轴刻度间隔是半小时  此时设置数据在X时间轴上显示的位置应该为：[Date.UTC(2010,12,22, 0, 15, 0),34],[Date.UTC(2010,12,22, 0, 15*3, 0),34],[Date.UTC(2010,12,22, 1, 15, 0),34]
//stack: 'male',
color: '#3E7CC8'
}, {
    type:'column',
name: '出港',
pointInterval: 60 * 60 * 1000,
             pointStart: Date.UTC(year, month, day, 0, 0, 0),
data: [[Date.UTC(2010,12,22, 1, 0, 0),20],[Date.UTC(2010,12,22, 3, 0, 0),19],[Date.UTC(2010,12,22, 5, 0, 0),31]
      ,[Date.UTC(2010,12,22, 7, 0, 0),29],[Date.UTC(2010,12,22, 9, 0, 0),46],[Date.UTC(2010,12,22, 11, 0, 0),20]
      ,[Date.UTC(2010,12,22, 13, 0, 0),19],[Date.UTC(2010,12,22,15, 0, 0),31]
      ,[Date.UTC(2010,12,22, 17, 0, 0),29]],
//stack: 'male',
color:'#FFCC00'
}, {
    type:'scatter',
name: '重要架次',
pointInterval: 60 * 60 * 1000,
             pointStart: Date.UTC(year, month, day, 0, 0, 0),
data:  [[Date.UTC(2010,12,22, 1, 0, 0),7],[Date.UTC(2010,12,22, 3, 0, 0),9],[Date.UTC(2010,12,22, 5, 0, 0),0]
      ,[Date.UTC(2010,12,22, 7, 0, 0),5],[Date.UTC(2010,12,22, 9, 0, 0),0],[Date.UTC(2010,12,22, 11, 0, 0),7]
      ,[Date.UTC(2010,12,22, 13, 0, 0),9],[Date.UTC(2010,12,22, 15, 0, 0),0]
      ,[Date.UTC(2010,12,22, 17, 0, 0),5]],
//stack: 'female',
color:'#FF0000'
}]
});
});
   </script>
  </head>

  <body>

<div id="data_chart_div">
<div  align="center"><span class = "title" id="liveTime1" ></span><span class = "title">当日计划显示</span>
    时间间隔：<SELECT class=selectbox  style="width:75px;"
id=interval onchange="intervalChange()">
<OPTION value="30" >
30分钟
</OPTION>
<OPTION value="60" >
60分钟
</OPTION>
<OPTION value="120" >
120分钟
</OPTION>
</SELECT>
</div>
<div id = "xscoll" style="width:98%; height:95%; overflow-x:auto;overflow-y:hidden; margin: 0 auto;">
<div id="container"
style="height:100%;">
</div>
</div>
</div>


<div id="data_detail_div">
<LI class=itemtitle>
<a href="#"
onclick="getFlightList('fmeTodayFlightList.do?method=getPlanFmeTodayListByClick&airportCode=12&type=planAll&timeStep=120')";>
计划飞行数量：<%= "203"%></a>
</LI>
<LI class=itemtitle>
<a href="#"
onclick="getFlightList('fmeTodayFlightList.do?method=getPlanFmeTodayListByClick&airportCode=123&type=planDep&timeStep=120')";>
进港数量：<%="4343"%></a>
</LI>
<LI class=itemtitle>
<a href="#"
onclick="getFlightList('fmeTodayFlightList.do?method=getPlanFmeTodayListByClick&airportCode=23&type=planArr&timeStep=120')";>
出港数量：<%="232"%></a>
</LI>
<LI class=itemtitle>
<a href="#"
onclick="getFlightList('fmeTodayFlightList.do?method=getPlanFmeTodayListByClick&airportCode=343&type=planVip&timeStep=120')";>
VIP数量：32</a>
</LI>
</div></body>
</html>

有完整代码没有？给我发一下，谢谢！
[email protected]

series: [{...
data: "",dataParser: ,dataURL: null,name: "",stack: null,type: "line",xAxis: 0,yAxis: 0}],

其中参数：data：数据是写死的吗？从后台可以动态取吗？？这个怎么取？？
你写的好像页面都是固定的！！！？？？

当然可以从后台获取了  你从后台获取过来数据然后在页面端处理一下后台获取的数据将数据分解成
这种格式的形式出现
//其中一条数据：[Date.UTC(2010,12,22, 3, 30, 0),59] 其中：Date.UTC(2010,12,22, 0, 30, 0)是设置数据在X时间轴上显示的位置
                        //   1）X轴刻度间隔是2小时  此时设置数据在X时间轴上显示的位置应该为：Date.UTC(2010,12,22, 1*n, 0, 0)   n为奇数
                        //   2）X轴刻度间隔是1小时  此时设置数据在X时间轴上显示的位置应该为：Date.UTC(2010,12,22, 0, 30, 0)
                        //   3）X轴刻度间隔是半小时  此时设置数据在X时间轴上显示的位置应该
以上这种格式只是x轴为时间轴的情况
这个一时半会真的说不清楚还是建议你到官网上把上面的例子都下载下来好好研究，别想着一下子就找个源码把东西做出来耐心研究一下理解了是怎么回事再去做

有没有jschart的添加事件的例子？楼上，我需要往jschart上添加时间，在点击时间显示数据

把data部分用实际的数据代替即可

调试易

jquery插件 Highcharts 从后台动态去得数据如何在页面上显示？高手求解

解决方案 »