在做项目时,用highcharts做过曲线图,X轴是从后台获取的时间数据,Y轴是从后台获取的Int型数据

1.我的后台数据封装成json格式,数据较多,展示部分数据

2.曲线图的展示

3.前端jsp页面代码

//引入的js

<!-- 曲线图 -->
<script src="<%=basePath%>Bootstrap/assets/js/highcharts/highcharts.js"></script>
<script src="<%=basePath%>Bootstrap/assets/js/highcharts/funnel.js"></script>
<script src="<%=basePath%>Bootstrap/assets/js/highcharts/highcharts-more.js"></script>

<div id="containerCall" style="width:80%;height:400px"></div>

var chart;

//呼叫量曲线图
Highcharts.setOptions( {
global : {
useUTC : false
}
});
pictureCall(0);                    //我这里需要传值,因为我有多个图表,不需要则不用传参

//呼叫量方法
function pictureCall(num){
var startStr= $("#search_graph_startDate").val()+" "+$("#search_graph_startTime").val();
var endStr= $("#search_graph_endDate").val()+" "+$("#search_graph_endTime").val();

optionsCall = {
chart : {
renderTo : 'containerCall',                       //此处为显示曲线图处的div的id
type : 'spline',
animation : Highcharts.svg,
marginRight : 10
},
plotOptions :{
cursor: 'pointer',
series: {
events:{
click:function(event){                        //点击曲线名隐藏,再点显示

}
}
}

},
credits: {
enabled: false                        //右下角不显示highcharts的graphO,为true则显示highcharts的图标
},
title : {
text : 'fs设备呼叫量显示图'
},
xAxis : {
type : 'datetime'
},
yAxis : {
title : {
text : ''
},
allowDecimals:false,
plotLines : [ {
value : 0,
width : 1,
color : '#808080'
} ]
},
tooltip : {
formatter : function() {
return '<b>'
+ this.series.name
+ '</b><br/>'
+ Highcharts.dateFormat(
'%Y-%m-%d %H:%M:%S', this.x)
+ '<br/>'
+ Highcharts.numberFormat(this.y, 2);
}
},
exporting : {
enabled : false
},
series:[]
},

$.ajax({
url : '<%=basePath%>resource/getDeviceSampleData.action',
type : 'POST',
dataType : 'json',
data:{
type:'call',
startTime:startStr,
endTime:endStr,
timeNum:num
},
success : function(result) {
$.each(result, function(index, element) {
var data1=new Array();
var timeAndValue =element.temp ;
for(var i=0;i<timeAndValue.length;i++){

//因为后台获取的时间,前端无法识别,所以要再次转换,若能识别,或者不是时间数据,此步骤可省略
var backTime = new Date(timeAndValue[i].time);
var preTime=backTime.getTime()-8*3600*1000;                     //UTC 输出为本地时间,会+8小时
var tt=new Date(preTime);

data1.push({
x: Date.UTC(tt.getFullYear(),tt.getMonth(),tt.getDate(),tt.getHours(),tt.getMinutes(),tt.getSeconds()),      
y: timeAndValue[i].tmpValue
});
}
optionsCall.series.push({"name": element.name, "data": data1});
});
chart = new Highcharts.Chart(optionsCall);
},
error : function(XMLHttpRequest, textStatus, errorThrown){
alert("error:"+textStatus);
}
});
}

官网highcharts曲线图地址:  http://v1.hcharts.cn/demo/index.php?p=10&theme=default

highcharts曲线图的更多相关文章

  1. Asp.net mvc4 + HighCharts + 曲线图

    前端代码: @{ Layout = null;}<!DOCTYPE html><html><head> <title></title> &l ...

  2. DWR(AJAX)+Highcharts绘制曲线图,饼图

    基本需求: 1. 在前台会用DWR框架(或者AJAX)调用Java后台代码获取要在Hightcharts展示的数据 2. 了解JSON(JavaScript Object Notation)的格式 3 ...

  3. Highcharts 总结

    一.Highcharts  series属性 1.下面是一个基本曲线图的例子: <html> <head> <meta charset="UTF-8" ...

  4. Highcharts 配置选项详细说明

    Highcharts 配置选项详细说明 Highcharts 提供大量的配置选项参数,您可以轻松定制符合用户要求的图表,本章节为大家详细介绍Highcharts 配置选项使用说明: 参数配置(属性+事 ...

  5. Highcharts 使用总结

    一.Highcharts  series属性 1.下面是一个基本曲线图的例子: <html> <head> <meta charset="UTF-8" ...

  6. Highcharts 基本曲线图

    基本曲线图实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="UTF-8" / ...

  7. 使用Highcharts生成折线图与曲线图

    折线图与曲线图可以显示随时间而变化的连续数据,因此非常适用于显示在相等时间间隔下数据的趋势.本文将结合Highcharts,生成一个城市气温变化折线图和一个随时间动态即时显示CPU走势的曲线图. 如果 ...

  8. 在.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图,柱状图,饼图

    开发背景: 今天在做一个关于商城后台金额报表统计的功能,为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表,大家也可以去了解一下免费开源主要是好看. 首 ...

  9. Highcharts绘制曲线图小结

    Higcharts绘制曲线图很好用! 虽然说Highcharts官网有API 刚接触这个领域,学有心得,理解不到位之处希望大家多多指教! 项目绘制的曲线是:平均水位随时间的变化而改变的水情走势图. 主 ...

随机推荐

  1. Broadcom有线网卡在Windows 8/8.1/10下使用系统自带驱动会断网的解决办法

    出处:qiuyi21.cnblogs.com 1.下载最新正式版驱动程序 上Broadcom官方网站http://www.broadcom.com/support/ethernet_nic/downl ...

  2. 【原创】android内存管理-内存泄漏原因

    转载请注明出处 http://www.cnblogs.com/weiwangnuanyang/p/5704596.html 先讲一下内存泄漏的概念:内存泄露是指无用对象持续占有内存,或者内存得不到及时 ...

  3. C/C++程序员应聘试题剖析(转载)

    转载自:http://www.cnitblog.com/zouzheng/articles/21856.html 1.引言 本文的写作目的并不在于提供C/C++程序员求职面试指导,而旨在从技术上分析面 ...

  4. WKWebView _WebFilterIsActive returning: NO

    写这篇文是因为在UIWebView加载页面的时候有时候会返回: filterBlacklist = ( ); filterWhitelist = ( ); restrictWeb = 1; useCo ...

  5. Spring异常抛出触发事务回滚

    Spring.EJB的声明式事务默认情况下都是在抛出unchecked exception后才会触发事务的回滚 /** * 如果在spring事务配置中不为切入点(如这里的切入点可以定义成test*) ...

  6. dump 分析模式之 INCORRECT STACK TRACE - djm2005dy的专栏 - 博客频道 - CSDN.NET

    Dump 分析模式之 INCORRECT STACK TRACE dump 分析模式之 INCORRECT STACK TRACE 翻译自 MDA-Anthology Page288  初学者常犯的错 ...

  7. Sql With as 用法

    with district as (     select  * from Area where AbbrTW= N'中國'     union all     select  a.* from Ar ...

  8. LB负载均衡层次结构(摘抄)

    作为后端应用的开发者,我们经常开发.调试.测试完我们的应用并发布到生产环境,用户就可以直接访问到我们的应用了.但对于互联网应用,在你的应用和用户之间还隔着一层低调的或厚或薄的负载均衡层软件,它们不显山 ...

  9. ASP.NET 访问母版页元素总结

    第一种方法: 在母版页里面新建一个Label控件 <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="s ...

  10. vim 大全用法

    vim中常用设置和操作: 在Linux系统下: 打开vi 文件: 0 数字0,跳转至行首    ^ 跳转至行第一个非空字符    $ 跳转至行尾 vim 括号匹配跳转操作: ctrl+] 跳转至函数或 ...