$(document).ready(
function() {
chart = new Highcharts.Chart( {
chart : {
renderTo : 'container',
margin : [ 80, 200, 60, 100 ],
zoomType : 'xy'
},
title : {
text : '合同 ${contractName} 数据分析',
style : {
margin : '10px 0 0 0' // center it
}
},
subtitle : {
text : '<ss:date name="startDate" format="yyyy-MM-dd HH:mm" />——<ss:date name="endDate" format="yyyy-MM-dd HH:mm" />',
style : {
margin : '10px 0 0 0' // center it
}
},
xAxis : [ {
categories : [ <ss:iterator value="dataList">'<ss:date name="statDate" format="MM-dd" />' ,</ss:iterator> ]
} ],
yAxis : [ // Secondary yAxis
{
title : {
text : '点击数',
margin : 70,
style : {
color : '#4572A7'
}
},
labels : {
formatter : function() {
return this.value + ' 次';
},
style : {
color : '#4572A7'
}
}
}, { // Tertiary yAxis
title : {
text : '曝光数',
margin : 80,
style : {
color : '#AA4643'
}
},
labels : {
formatter : function() {
return this.value + ' 次';
},
style : {
color : '#AA4643'
}
},
opposite : true,
offset : 100
},
{ // Primary yAxis
labels : {
formatter : function() {
return this.value + '%';
},
style : {
color : '#89A54E'
}
},
title : {
text : '点击率',
style : {
color : '#89A54E'
},
margin : 50
},
opposite : true
}],
tooltip : {
formatter : function() {
var unit = {
'点击数' : '次',
'曝光数' : '次',
'点击率' : '%'
}[this.series.name];
return '' + this.x + ': ' + this.y + ' ' + unit;
}
},
legend : {
layout : 'vertical',
style : {
left : '30px',
bottom : 'auto',
right : 'auto',
top : '10px'
},
backgroundColor : '#FFFFFF'
},
series : [
{
name : '点击数',
color : '#4572A7',
type : 'line',
data : [ <ss:iterator value="dataList"><ss:property value="click" />,</ss:iterator> ]
},
{
name : '曝光数',
type : 'line',
color : '#AA4643',
yAxis : 1,
data : [ <ss:iterator value="dataList"> <ss:property value="impressions" />,</ss:iterator> ]
},
{
name : '点击率',
color : '#89A54E',
type : 'line',
yAxis : 2,
data : [ <ss:iterator value="dataList"> <ss:property value="clickRank" /> ,</ss:iterator>]
} ]
});
});
Html中只需要适当位置加上<div id="container"></div>即可。如果要显示网格式的风格再js中再加入下面代码:
Highcharts.theme = {
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4'],
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
}
,
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
},
title: {
style: {
color: '#000',
font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
}
},
subtitle: {
style: {
color: '#666666',
font: 'bold 12px "Trebuchet MS", Verdana, sans-serif'
}
},
xAxis: {
gridLineWidth: 1,
lineColor: '#000',
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
yAxis: {
minorTickInterval: 'auto',
lineColor: '#000',
lineWidth: 1,
tickWidth: 1,
tickColor: '#000',
labels: {
style: {
color: '#000',
font: '11px Trebuchet MS, Verdana, sans-serif'
}
},
title: {
style: {
color: '#333',
fontWeight: 'bold',
fontSize: '12px',
fontFamily: 'Trebuchet MS, Verdana, sans-serif'
}
}
},
legend: {
itemStyle: {
font: '9pt Trebuchet MS, Verdana, sans-serif',
color: 'black'
},
itemHoverStyle: {
color: '#039'
},
itemHiddenStyle: {
color: 'gray'
}
},
labels: {
style: {
color: '#99b'
}
}
};
var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
你也可以自己按要求定义显示风格。
另外,要从服务器获取数据动态生成运行曲线,像心电图那样可以
配置chart:{
events:{
load:requestData
}
} ,
series: [{ name: '服务器数据', data: [] }]
方法:
chart.series[0].addPoint([x,y], true, shift);
02 |
$(document).ready( function (){
|
03 |
chart = new Highcharts.Chart({
|
05 |
renderTo: 'container' ,
|
06 |
defaultSeriesType: 'spline' ,
|
12 |
formatter: function () {
|
13 |
return '' + this .series.name + '<br/>' +
|
14 |
'时间 : ' + this .x + '<br/>' +
|
45 |
function requestData() {
|
47 |
url: 'orderAuction.action' ,
|
48 |
success: function (point) {
|
49 |
var series = chart.series[0],
|
50 |
shift = series.data.length > 20;
|
51 |
var s=eval( '(' +point+ ')' );
|
52 |
var y=s.initial.price;
|
53 |
var z=s.initial.change;
|
54 |
chart.series[0].addPoint([x,y], true , shift);
|
56 |
timett = setTimeout( 'requestData()' , 1000);
|
(二)jQuery插件flexigrid是像ext的DataGrid一样的活动表格插件,使用它首先要引入query.js,还要引入flexigrid.js和flexigrid.css
看看插件中部分代码以及说明
- if(t.grid)
- returnfalse;//returnifalreadyexist
- //applydefaultproperties
- p=$.extend({
-
height:200,//flexigrid插件的高度,单位为px
-
width:'auto',//宽度值,auto表示根据每列的宽度自动计算
- striped:true,//是否显示斑纹效果,默认是奇偶交互的形式
- novstripe:false,
-
minwidth:30,//列的最小宽度
-
minheight:80,//列的最小高度
- resizable:true,//是否可伸缩
- url:false,//ajax方式对应的url地址
-
method:'POST',//数据发送方式
-
dataType:'xml',//数据加载的类型
- checkbox:false,//是否要多选框
-
errormsg:'连接错误!',//错误提示信息
- usepager:false,//是否分页
- nowrap:true,//是否不换行
-
page:1,//默认当前页
-
total:1,//总页面数
- useRp:true,//是否可以动态设置每页显示的结果数
-
rp:15,//每页默认的结果数
-
rpOptions:[5,10,15,20,25,30,40],//可选择设定的每页结果数
- title:false,//是否包含标题
-
pagestat:'显示第{from}条到{to}条,共{total}条数据',//显示当前页和总页面的样式
-
procmsg:'正在处理,请稍候...',//正在处理的提示信息
-
query:'',//搜索查询的条件
-
qtype:'',//搜索查询的类别
-
nomsg:'没有数据存在!',//无结果的提示信息
-
minColToggle:1,//允许显示的最小列数
- showToggleBtn:true,//是否允许显示隐藏列,该属性有bug设置成false点击头脚本报错
- hideOnSubmit:true,//隐藏提交
- autoload:true,//自动加载
-
blockOpacity:0.5,//透明度设置
- onToggleCol:false,//当在行之间转换时,可在此方法中重写默认实现,基本无用
- onChangeSort:false,//当改变排序时,可在此方法中重写默认实现,自行实现客户端排序
- onSuccess:false,//成功后执行
- onSubmit:false
- //调用自定义的计算函数
- },p);
了解了每个属性的含义后就可以根据自己的需要来配置了,看我的实例:
$("#flex1").flexigrid
(
{
url: './contract_getAllJsonData.action?startDate=<ss:date name="startDate" format="yyyy-MM- dd"/>&endDate=<ss:date name="endDate" format="yyyy-MM-dd"/>&contractId=${contractId}',
dataType: 'json',
method: 'POST',
colModel : [
{display: '广告位', name : 'advName', width : 300, sortable : true, align: 'center'},
{display: '开始投放时间', name : 'start', width : 180, sortable : true, align: 'left'},
{display: '结束投放时间', name : 'end', width : 180, sortable : true, align: 'left'},
{display: '点击数', name : 'clicks', width : 80, sortable : true, align: 'left'},
{display: '曝光数', name : 'impressions', width : 80, sortable : true, align: 'left'},
{display: '分析', name : 'impressions', width : 80, sortable : true, align: 'left'}
],
sortname: "advName",
sortorder: "asc",
usepager: true,
useRp: true,
title: '统计期间该合同广告位投放',
showTableToggleBtn: true,
width: 1000,
height: 200
}
);
后台java代码(struts2),由于框架不同代码有可能不同,我这里一次查出了所有需要数据,没有考虑分页,需要分页的话,请将page 等信息传入后来查询。
/**
* 用于结合flexigrid实现可选表格
* @return
*/
public String getAllJsonData() {
SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm");
ContractReportService service = (ContractReportService) SpringHelper
.getBean(TMG_REPORTS_CONTRACT);
Map map = new HashMap();
map.put("contractId", contractId);
map.put("startdate", startDate);
map.put("enddate", endDate);
list = service.getAdvListbyContract(map);
try {
List mapList = new ArrayList();
for(int i = 0; i < list.size(); i++) {
Map cellMap = new HashMap();
ContractReport cr = (ContractReport)list.get(i);
cellMap.put("cell", new Object[] {cr.getAdvName(), formatter.format(cr.getStart()), formatter.format(cr.getEnd()), cr.getClicks(), cr.getImpressions(),"<img alt='分析' src='../image/analyse.gif'>"});
mapList.add(cellMap);
}
Map pageInfo = new HashMap();
pageInfo.put("rows", mapList);
JSONObject object = new JSONObject();
object.accumulateAll(pageInfo);
Struts2Utils.getResponse().setContentType("text/x-json");
Struts2Utils.getResponse().setCharacterEncoding("UTF-8");
Struts2Utils.getResponse().setHeader("Cache-Control", "no-cache");
Struts2Utils.getResponse().getWriter().write(object.toString());
Struts2Utils.getResponse().getWriter().flush();
Struts2Utils.getResponse().getWriter().close();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
最后上图(用highcharts和flexigrid实现):
由于时间仓促,仅仅写了些皮毛,大家参考使用,详细使用方法还请参考官网。
相关推荐
jquery Highcharts jquery Highcharts jquery Highcharts
Jquery是封装了javascript的一个轻量的级函数库,query报表插件给客户端看去一种美观动态的感觉。
支持各种统计图形,并且有鼠标事件,图形也比较好看,里面带有demo
jQuery+highcharts各种数据统计图表代码 jQuery+highcharts各种数据统计图表代码 jQuery+highcharts各种数据统计图表代码
jQuery及highcharts做cpu动态走势图,https://blog.csdn.net/qq_40374604/article/details/83578837,有问题请留言
本文实例讲述了jQuery插件HighCharts绘制2D带Label的折线图效果。分享给大家供大家参考,具体如下: 1、示例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>...
主要介绍了jQuery插件HighCharts绘制的基本折线图效果,结合实例形式分析了jQuery基于HighCharts插件绘制图形的具体实现步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了jQuery插件HighCharts绘制2D饼图效果。分享给大家供大家参考,具体如下: 1、实例代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HighCharts 2D...
EasyUI图表插件Highcharts源码Demo(Java)
jquery统计图插件Highcharts-2.2.5.zip
主要介绍了jQuery插件HighCharts实现气泡图效果,结合完整实例形式分析了jQuery插件HighCharts绘制气泡图的实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
主要介绍了jQuery插件HighCharts实现的2D面积图效果,结合完整实例形式分析了jQuery插件HighCharts绘制2D面积图的相关步骤与属性设置技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
主要介绍了jQuery插件HighCharts实现的2D堆条状图效果,结合完整实例形式分析了jQuery插件HighCharts绘制条状图的具体实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
主要介绍了jQuery插件HighCharts绘制2D金字塔图效果,结合实例形式分析了jQuery使用HighCharts插件绘制金字塔图效果的操作步骤与相关实现技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
在web开发的时候 ,经常会用到一些图表,本人在这里上传一些非常有用的利用jquery的插件highcharts.js制作图表例子,供大家参考使用……
通过此方法可以实现 highcharts 和 数据库交互。 参考资料: http://blog.csdn.net/taomanman/article/details/6325942。 内附 代码效果截图
主要介绍了jQuery插件HighCharts实现的2D条状图效果,结合完整实例形式详细分析了jQuery插件HighCharts绘制2D条状图的操作步骤与相关属性设置技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
主要介绍了jQuery插件HighCharts绘制的2D堆柱状图效果,结合完整实例形式分析了jQuery插件HighCharts绘制2D柱状图的实现技巧与相关注意事项,并附带demo源码供读者下载参考,需要的朋友可以参考下
主要介绍了jQuery插件HighCharts绘制2D半圆环图效果,结合实例形式分析了jQuery使用HighCharts插件绘制半圆环图形的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
今天我们要来分享一款基于jQuery的highcharts实时图表插件,highcharts图表插件定义了每隔一秒钟更新数据,然后根据每个数据点绘制一条折线,随着数据的更新,折线也就会不停的向前移动,形成一个类似CPU实时监控的...