在做项目时,用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. C# Socket简单例子(服务器与客户端通信)

    这个例子只是简单实现了如何使用 Socket 类实现面向连接的通信. 注意:此例子的目的只是为了说明用套接字写程序的大概思路,而不是实际项目中的使用程序.在这个例子中,实际上还有很多问题没有解决,如消 ...

  2. 二模13day1解题报告

    二模13day1解题报告 T1.发射站(station) N个发射站,每个发射站有高度hi,发射信号强度vi,每个发射站的信号只会被左和右第一个比他高的收到.现在求收到信号最强的发射站. 我用了时间复 ...

  3. STL之序列容器vector

    首先来看看vector的模板声明: template <class T, class Alloc = allocator<T>> class vector { //… }; v ...

  4. try-catch-finally 引发的奇怪问题

    今天,发现我们的一个Windows Service无法正常停止,无奈之下只能杀了进程. 为了找到原因,我在本地进行调试,发现程序里用到了多线程,而代码正是卡在了workThread.Abort()语句 ...

  5. jsvascript—谜之this?

    原文:Gentle explanation of ‘this’ keyword in JavaScript 1. 迷之 this 对于刚开始进行 JavaScript 编程的开发者来说,this 具有 ...

  6. Productivity Power Tools 动画演示(转)

    Productivity Power Tools 是微软官方推出的 Visual Studio 扩展,被用以提高开发人员生产率.它的出现一定程度上弥补和完善了 Visual Studio 自身的不足, ...

  7. AngularJS 2 Typescript 相关

    1. Angular 2 In 60 Minutes (2016年11月23日) https://www.youtube.com/watch?v=-zW1zHqsdyc 2. AngularJS Cl ...

  8. springMVC学习笔记(五)

    一.使用Ajax调用 1.1 Controller返回的类型为text类型的方式. @RequestMapping("/getPerson") public void getPer ...

  9. C# iis错误配置信息( 500.21 - Internal Server Error )

    新电脑安装完开发环境后,还需要注册framework4.0到IIS.不然会报错: HTTP 错误 500.21 - Internal Server Error 处理程序"Extensionl ...

  10. 【Shell脚本】怎样表示一个for循环

    [Shell脚本]怎样表示一个for循环 在此说一下我常用的两个结构: 1. for i in $(seq 1 100); do         echo $i done 2. for (( i = ...