87,989
社区成员
发帖
与我相关
我的任务
分享jquery插件 Highcharts 从后台动态去得数据如何在页面上显示？高手求解
jquery插件 Highcharts 从后台动态去得数据如何在页面上显示？
series: [{...
data: "",dataParser: ,dataURL: null,name: "",stack: null,type: "line",xAxis: 0,yAxis: 0}],
series？？？参数怎么用，data是后台取出来的如何设置？？？高手求解[
series: [{...
data: "",dataParser: ,dataURL: null,name: "",stack: null,type: "line",xAxis: 0,yAxis: 0}],
series？？？参数怎么用，data是后台取出来的如何设置？？？高手求解[
...全文
请发表友善的回复…
发表回复
一叶飞舟 2011-08-25
- 打赏
- 举报
把data部分用实际的数据代替即可。。。。。。
tang_tang_yu 2011-08-16
- 打赏
- 举报
有没有jschart的添加事件的例子？楼上，我需要往jschart上添加时间，在点击时间显示数据
风中叶 2011-08-16
- 打赏
- 举报
当然可以从后台获取了 你从后台获取过来数据 然后在页面端处理一下后台获取的数据 将数据分解成
这种格式的形式出现
//其中一条数据：[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轴为时间轴的情况
这个一时半会真的说不清楚 还是建议你到官网上把上面的例子都下载下来 好好研究，别想着一下子就找个源码把东西做出来 耐心研究一下 理解了是怎么回事再去做
这种格式的形式出现
//其中一条数据：[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轴为时间轴的情况
这个一时半会真的说不清楚 还是建议你到官网上把上面的例子都下载下来 好好研究，别想着一下子就找个源码把东西做出来 耐心研究一下 理解了是怎么回事再去做
裘马轻狂大师 2011-08-15
- 打赏
- 举报
series: [{...
data: "",dataParser: ,dataURL: null,name: "",stack: null,type: "line",xAxis: 0,yAxis: 0}],
其中参数：data：数据是写死的吗？从后台可以动态取吗？？这个怎么取？？
你写的好像页面都是固定的！！！？？？
data: "",dataParser: ,dataURL: null,name: "",stack: null,type: "line",xAxis: 0,yAxis: 0}],
其中参数：data：数据是写死的吗？从后台可以动态取吗？？这个怎么取？？
你写的好像页面都是固定的！！！？？？
裘马轻狂大师 2011-08-15
- 打赏
- 举报
有完整代码没有？给我发一下 ，谢谢！
zhangpurple@163.com
zhangpurple@163.com
风中叶 2011-08-15
- 打赏
- 举报
这个也是柱状图 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
}
},
marker: {
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: {
//不显示线性图上的图标
marker: {
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×tep=120')";>
计划飞行数量：<%= "203"%></a>
</LI>
<LI class=itemtitle>
<a href="#"
onclick="getFlightList('fmeTodayFlightList.do?method=getPlanFmeTodayListByClick&airportCode=123&type=planDep×tep=120')";>
进港数量：<%="4343"%></a>
</LI>
<LI class=itemtitle>
<a href="#"
onclick="getFlightList('fmeTodayFlightList.do?method=getPlanFmeTodayListByClick&airportCode=23&type=planArr×tep=120')";>
出港数量：<%="232"%></a>
</LI>
<LI class=itemtitle>
<a href="#"
onclick="getFlightList('fmeTodayFlightList.do?method=getPlanFmeTodayListByClick&airportCode=343&type=planVip×tep=120')";>
VIP数量：32</a>
</LI>
</div>
</body>
</html>
风中叶 2011-08-15
- 打赏
- 举报
你可以在网上搜一搜 网上资料还是挺多的 到官网上http://www.highcharts.com看看 上面有各种图形的很多例子
风中叶 2011-08-15
- 打赏
- 举报
Highcharts插件可以生成很多中图的 不知道你说的是哪种
这个也是柱状图 x轴不是时间轴的
这个也是柱状图 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>
裘马轻狂大师 2011-08-15
- 打赏
- 举报
先顶一下，
