热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

highcharts结合ajax绘图x轴时间怎么设置?

最近做一个温度监控的web程序,需要显示一段时间内的温度历史曲线,使用的是ajax返回一个二维数组{温度,时间},怎样才能把这个数组让它分别对应y轴和x轴?刚接触highcharts
最近做一个温度监控的web程序,需要显示一段时间内的温度历史曲线,

使用的是ajax返回一个二维数组{温度,时间},怎样才能把这个数组让它分别对应y轴和x轴?

刚接触highcharts 不太会用

9 个解决方案

#1



//不知道楼主返回的是哪个形式的二维数组,如果是ar1,那么需要转换成ar2的形式
ar1=[[温度1,时间1],[温度2,时间2],[温度3,时间3]];
ar2=[[温度1,2,3],[时间1,2,3]];
var tem=new Array();
tem=parseInt(ar2["0"]);
var time=new Array();
time=parseInt(ar2["1"])

    var chart1 = new Highcharts.Chart({

chart:{
renderTo: 'container',
type:'spline'
},
title:{
    text: '123'
},
xAxis:{
title: {
text: 'time'
},
categories: time
},
yAxis: {
min:0,
max:100,
title: {
text: 'temperature'
}  
},
series: [{

data:tem

}]

});

#2


引用 1 楼 z284122755 的回复:
Javascript code
?



1234567891011121314151617181920212223242526272829303132333435363738

//不知道楼主返回的是哪个形式的二维数组,如果是ar1,那么需要转换成ar2的形式 ar1=[[温度1,时间1],[温度2,时间2],[温度3,时间3]]; ar2=[[温度1,2,3],[时间1,2,3]……

时间轴 已经看不清了,怎么解决呢?

#3



 XAxis: {
                    min: 0,
                    title: {text: '百分比'}
 //Y轴坐标标题  labels:纵柱标尺
                }, plotLines: [{
//区分线或可根据项目 标出其基线 value//表示显示数值 width//显示宽 px
value: 0,
width: 1,
color: '#808080',
}]
},
//【图例】位置样式
                legend: {                  
                    layout: 'horizontal',
                       //【图例】显示的样式:水平(horizontal)/垂直(vertical)
                    backgroundColor: '#FFFFFF',
                    borderColor: '#CCC',
                    borderWidth: 1,
                    align: 'center',
                    verticalAlign: 'top',//默认为底部
                    enabled:true,
                    //x: 100,
                    y: 50,
                    //floating: true,
                    shadow: true,
   width : 650,
 itemWidth : 210
                },

#4


楼主能加我QQ吗我和你做的是一样的功能,我想看看你的页面代码
我用的是拼接字符串的方式,解决了你说的时间问题
但是我的第二个功能,显示多条曲线,就必须用2维数组了,JSON我一点都不会用.想向你学习一下 
QQ:903054953

#5


http://www.highcharts.com/demo/
http://www.highcharts.com/ref
 不是写的很明白了吗?

#6


引用 1 楼 z284122755 的回复:

//不知道楼主返回的是哪个形式的二维数组,如果是ar1,那么需要转换成ar2的形式
ar1=[[温度1,时间1],[温度2,时间2],[温度3,时间3]];
ar2=[[温度1,2,3],[时间1,2,3]];
var tem=new Array();
tem=parseInt(ar2["0"]);
var time=new Array();
time=parseInt(ar2["1"])

    var chart1 = new Highcharts.Chart({

chart:{
renderTo: 'container',
type:'spline'
},
title:{
    text: '123'
},
xAxis:{
title: {
text: 'time'
},
categories: time
},
yAxis: {
min:0,
max:100,
title: {
text: 'temperature'
}  
},
series: [{

data:tem

}]

});



tem=parseInt(ar2["0"]);如果tem的元素是UTC时间格式的,不能识别应该怎么处理?求解~~

#7


时间轴看不清楚可以斜着排,二位数组你可以动态拼成连格格字符串,然后eval

#8


挤在一起了应该是X轴的数据类型被死别为string了

其实只要在数据上【温度,时间】=【x值,y值】   然后  
xAxis:{
                         //type: 数据类型

                    },
                    yAxis: {
                          //同上

                    },

highchart就会自动识别了

#9


该回复于2014-07-23 14:03:14被管理员删除

推荐阅读
  • SpringMVC接收请求参数的方式总结
    本文总结了在SpringMVC开发中处理控制器参数的各种方式,包括处理使用@RequestParam注解的参数、MultipartFile类型参数和Simple类型参数的RequestParamMethodArgumentResolver,处理@RequestBody注解的参数的RequestResponseBodyMethodProcessor,以及PathVariableMapMethodArgumentResol等子类。 ... [详细]
  • 本文介绍了在开发Android新闻App时,搭建本地服务器的步骤。通过使用XAMPP软件,可以一键式搭建起开发环境,包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表,并设置相应的属性。最后,给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]
  • 本文介绍了Perl的测试框架Test::Base,它是一个数据驱动的测试框架,可以自动进行单元测试,省去手工编写测试程序的麻烦。与Test::More完全兼容,使用方法简单。以plural函数为例,展示了Test::Base的使用方法。 ... [详细]
  • 模板引擎StringTemplate的使用方法和特点
    本文介绍了模板引擎StringTemplate的使用方法和特点,包括强制Model和View的分离、Lazy-Evaluation、Recursive enable等。同时,还介绍了StringTemplate语法中的属性和普通字符的使用方法,并提供了向模板填充属性的示例代码。 ... [详细]
  • 网址:https:vue.docschina.orgv2guideforms.html表单input绑定基础用法可以通过使用v-model指令,在 ... [详细]
  • 本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式,然后详细介绍了相关API,包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List,以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较,指出了JSON的优势和缺点。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 本文介绍了Redis的基础数据结构string的应用场景,并以面试的形式进行问答讲解,帮助读者更好地理解和应用Redis。同时,描述了一位面试者的心理状态和面试官的行为。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • CF:3D City Model(小思维)问题解析和代码实现
    本文通过解析CF:3D City Model问题,介绍了问题的背景和要求,并给出了相应的代码实现。该问题涉及到在一个矩形的网格上建造城市的情景,每个网格单元可以作为建筑的基础,建筑由多个立方体叠加而成。文章详细讲解了问题的解决思路,并给出了相应的代码实现供读者参考。 ... [详细]
  • [大整数乘法] java代码实现
    本文介绍了使用java代码实现大整数乘法的过程,同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率,并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]
  • 前景:当UI一个查询条件为多项选择,或录入多个条件的时候,比如查询所有名称里面包含以下动态条件,需要模糊查询里面每一项时比如是这样一个数组条件:newstring[]{兴业银行, ... [详细]
  • ASP.NET2.0数据教程之十四:使用FormView的模板
    本文介绍了在ASP.NET 2.0中使用FormView控件来实现自定义的显示外观,与GridView和DetailsView不同,FormView使用模板来呈现,可以实现不规则的外观呈现。同时还介绍了TemplateField的用法和FormView与DetailsView的区别。 ... [详细]
  • 如何查询zone下的表的信息
    本文介绍了如何通过TcaplusDB知识库查询zone下的表的信息。包括请求地址、GET请求参数说明、返回参数说明等内容。通过curl方法发起请求,并提供了请求示例。 ... [详细]
author-avatar
矮辛楚楚拉_760
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有