解决HighChart开发遇到的2个问题
需求很简单,显示一条24小时的变化曲线
写完代码效果是只有一条直线,连时间轴都没有
第1个错误 Highcharts error #12
当通过要绘制的点超过1000个时就会报这个错,我按分钟计算间隔,一天有1440分钟,超过了1000所以报错。
解决办法是在初始化参数中配置
plotOptions: {
series: {
turboThreshold: 2000 // 或者更多,必须大于数组长度(1440)
}
}
设置完成后时间轴算是显示出来了,但是不正常,只显示其中的几个小时。 而且仍然没有数据,显示为一条直线。
后台明明是有数据传来的,怎么会得不到曲线呢?
后来才发现,数据库的字段是字符型的,所以传到前台js中也是字符型,要手动将其转为数值类型。
parseFloat(chartdata[i][col]);
全部代码如下
function drawChart(chartdata, col, cname) {
var datasource = [];
for (var i = 0; i < 60 * 24; i++) {
if (chartdata[i]) {
var tempval = parseFloat(chartdata[i][col]);
datasource.push(tempval);
}
else {
datasource.push(null);
}
}
var start = +new Date(GetNowFormatDate() + ' 00:00:00');
var now = +new Date();
Highcharts.setOptions({
global: { useUTC: false },
lang: {
contextButtonTitle: '导出',
printChart: '打印图表',
downloadJPEG: '导出为JPG',
downloadPDF: '导出为PDF',
downloadPNG: '导出为PNG',
downloadSVG: '导出为SVG',
loading: '加载中...'
}
});
console.log(datasource);
$('#container').highcharts('StockChart', {
chart: {
events: {
load: function () {
if (!window.isComparing) {
this.setTitle(null, {
text: '加载完成共消耗 ' + (new Date() - now) + 'ms'
});
}
}
},
animation: false,
zoomType: 'x'
},
rangeSelector: {
enabled: false
},
tooltip: {
split: false,
shared: true
},
credits: {
enabled: false
},
yAxis: {
title: {
text: '监测值'
}
},
title: {
text: cname
},
series: [{
name: '监测值',
data: datasource,
pointStart: start,
dataLength: length,
pointInterval: 1000 * 60,
tooltip: {
valueDecimals: 1,
valueSuffix: ''
}
}],
plotOptions: {
series: {
turboThreshold: 2000 // 或者更多,必须大于数组长度(1440)
}
}
});
}
解决HighChart开发遇到的2个问题的更多相关文章
- Node.js配合node-http-proxy解决本地开发ajax跨域问题
情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps Office新的App模型
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps Office新的App模型 Office 2 ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps Office的JavaScript对象模型
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps Office的JavaScript对象模型 ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps 集成SP和Office App
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps 集成SP和Office App 你能够用两种 ...
- 解决QML开发中ComboBox中一个已选择项没有清除的问题
解决QML开发中ComboBox中一个已选择项没有清除的问题 近期使用QML开发一个项目.须要使用ComboBox进行显示.当进行一个操作时,须要向ComboBox加入一个元素,当进行另外一个操作时. ...
- 反射解决微信开发加解密illegal key size,不需要修改JDK jar包
在微信开发时,消息接口时,涉及到消息加密,抛出了 java.security.InvalidKeyException: Illegal key size 的异常,异常堆栈如下: 按照网上的解决方案,都 ...
- 解决VS2008 开发Windows Mobile 项目生成速度慢的问题(转)
最近用VS2008开发Windows Mobile程序,使用C#..NET Compact Framework,发现项目生成速度比较慢.用VS2008打开项目后,开始一段时间生成速度还能忍受,时间一长 ...
- BizTalk动手实验(十六)EDI-AS2解决文案开发配置
1 课程简介 通过本课程熟悉EDI.AS2解决文案的开发与配置,本动手实验步骤及内容采用微软官方SDK完成,学员在实验过程中结合官方教程来完成本实验 本实验基于BizTalk 2013(Windows ...
- 解决Android开发中,ActiveAndroid和Gson同时使用,对象序列化失败的问题
ActiveAndroid是安卓开发常用的ORM框架. Gson则是Google提供的轻量级序列化框架,非常适合Android开发使用. 但这两者同时使用,会产生序列化失败的问题.你通常会收到如下信息 ...
随机推荐
- 01bootstrap_基本结构和布局
01bootstrap_基本结构 学习bootstrap需要下载必要的文件:www.bootcss.com 基本结构 container page-header 布局 1.响应式布局:containe ...
- 初始化 CSS 样式
为什么要初始化 CSS 样式 因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异. 当然,初始化样式会对 SEO 有一定的影响,但鱼 ...
- 19/03/17Python笔记
一.判断元素是否为数字 ".isdigit() #判断123是不是数字,是的话输出True,不是输出False 二.标志位 需要死循环时,不一定用 while True 还可以用 while ...
- python set 集合复习--点滴
一.set特性: set是一个无序不重复的元素集合. 集合对象是一组无序排列的可哈希的值,集合成员可以做字典中的键.集合支持用in和not in操作符检查成员,由len()内建函数得到集合的基数(大小 ...
- LG1912 [NOI2009]诗人小G
题意 题目描述 小G是一个出色的诗人,经常作诗自娱自乐.但是,他一直被一件事情所困扰,那就是诗的排版问题. 一首诗包含了若干个句子,对于一些连续的短句,可以将它们用空格隔开并放在一行中,注意一行中可以 ...
- 18.1 volatile的作用
volatile的作用是作为指令关键字,确保本条指令不会因编译器的优化而省略,且要求每次直接读值. 1.编译器的优化 在本次线程内,当读取一个变量时,为提高存取速度,编译器优化时有时会先把变量读取到一 ...
- JAVA常用工具类异常处理
1异常的定义 异常就是与我们编译相违背在过程中出现的逻辑或忘记一些赋值等等 分为编译时错误和运行时错误 运行时异常 我们一般处理的时Exception异常: 异常处理 异常处理可以通过关键字try,c ...
- Excel函数匹配查找
需求 例如:北京沃尔玛有限公司,由已知的沃尔玛缩写,将两者进行匹配. 函数 lookup() 第一个参数“Lookup_value”:是要查找的值:第二个参数“lookup_vector”:是要查找的 ...
- CSS存在形式的引用
撰写个css文件 直接引用css文件样式的内容.本质是将css文件拿过来
- python之路——15
王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 复习 1.迭代器 1.可迭代协议:含有iter 2.迭代器协议:含有iter和next 3.特点:节省内存, ...