需求很简单,显示一条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个问题的更多相关文章

  1. Node.js配合node-http-proxy解决本地开发ajax跨域问题

    情景: 前后端分离,本地前端开发调用接口会有跨域问题,一般有以下3种解决方法: 1. 后端接口打包到本地运行(缺点:每次后端更新都要去测试服下一个更新包,还要在本地搭建java运行环境,麻烦) 2. ...

  2. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps Office新的App模型

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps  Office新的App模型         Office 2 ...

  3. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps Office的JavaScript对象模型

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps  Office的JavaScript对象模型         ...

  4. BEGINNING SHAREPOINT&#174; 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps 集成SP和Office App

    BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第11章节--为Office和SP解决方式开发集成Apps  集成SP和Office App         你能够用两种 ...

  5. 解决QML开发中ComboBox中一个已选择项没有清除的问题

    解决QML开发中ComboBox中一个已选择项没有清除的问题 近期使用QML开发一个项目.须要使用ComboBox进行显示.当进行一个操作时,须要向ComboBox加入一个元素,当进行另外一个操作时. ...

  6. 反射解决微信开发加解密illegal key size,不需要修改JDK jar包

    在微信开发时,消息接口时,涉及到消息加密,抛出了 java.security.InvalidKeyException: Illegal key size 的异常,异常堆栈如下: 按照网上的解决方案,都 ...

  7. 解决VS2008 开发Windows Mobile 项目生成速度慢的问题(转)

    最近用VS2008开发Windows Mobile程序,使用C#..NET Compact Framework,发现项目生成速度比较慢.用VS2008打开项目后,开始一段时间生成速度还能忍受,时间一长 ...

  8. BizTalk动手实验(十六)EDI-AS2解决文案开发配置

    1 课程简介 通过本课程熟悉EDI.AS2解决文案的开发与配置,本动手实验步骤及内容采用微软官方SDK完成,学员在实验过程中结合官方教程来完成本实验 本实验基于BizTalk 2013(Windows ...

  9. 解决Android开发中,ActiveAndroid和Gson同时使用,对象序列化失败的问题

    ActiveAndroid是安卓开发常用的ORM框架. Gson则是Google提供的轻量级序列化框架,非常适合Android开发使用. 但这两者同时使用,会产生序列化失败的问题.你通常会收到如下信息 ...

随机推荐

  1. CentOS磁盘满了,导致磁盘无法写入,这么清理

    输入命令 du -sh /* | sort -nr 会列出根目录文件夹的大小 看到哪个文件夹比较大 删除相应的缓存,重启服务器即可

  2. 使用loadrunner监控apcahe

    一般要修改的内容在Httpd.conf文件中已经存在,如果不存在请自行添加相应内容. (1)修改Apache中Httpd.conf文件, (2)添加ExtendedStatus,设置ExtendedS ...

  3. Coprime Sequence (HDU 6025)前缀和与后缀和的应用

    题意:给出一串数列,这串数列的gcd为1,要求取出一个数使取出后的数列gcd最大. 题解:可以通过对数列进行预处理,求出从下标为1开始的数对于前面的数的gcd(数组从下标0开始),称为前缀gcd,再以 ...

  4. 15.python并发编程(线程--进程--协程)

    一.进程:1.定义:进程最小的资源单位,本质就是一个程序在一个数据集上的一次动态执行(运行)的过程2.组成:进程一般由程序,数据集,进程控制三部分组成:(1)程序:用来描述进程要完成哪些功能以及如何完 ...

  5. C#语言与变量、数据类型

    一.计算机语言 1.计算机语言包括:C\PHP\Ruby\JAVA\C#\Basi\JS\C++ 2.计算机语言发展史:机器语言——汇编语言——高级语言 二.代码 1.程序始终:Code(编码).Co ...

  6. 关于windows下的文件结束符

    在<c++ primer>中有说,在windows中文件结束符为:ctrl+z,在Linux中为:ctrl+D. 但是在while(cin>>s)的语句运行中,需要两次的^Z, ...

  7. 【SpringBoot】SpringBoot拦截器实战和 Servlet3.0自定义Filter、Listener

    =================6.SpringBoot拦截器实战和 Servlet3.0自定义Filter.Listener ============ 1.深入SpringBoot2.x过滤器Fi ...

  8. MySQL Execution Plan--IN查询计划(2)

    在MySQL中,IN查找经常出现性能问题,相同SQL在MySQL不同版本中表现不同. 准备测试数据: ## 创建表tb001 CREATE TABLE tb001( id INT unsigned N ...

  9. IntelliJ IDEA 新版发布:支持CPU火焰图,新增酷炫主题

    JetBrain 是一家伟大的公司,一直致力于为开发者开发世界上最好用的集成开发环境 就在上周,JetBrain 公司发布了 Java 集成开发环境 IntelliJ IDEA 最新版本 2018.3 ...

  10. ssh登录原理及免密登录方法

    免密登录设置 1.进入到我的home目录  cd ~/.ssh 2.生成ssh免登陆秘钥ssh-keygen -t rsa (四个回车)      执行完这个命令后,会生成两个文件id_rsa(私钥) ...