需求很简单,显示一条24小时的变化曲线

写完代码效果是只有一条直线,连时间轴都没有

第1个错误  Highcharts error #12

当通过要绘制的点超过1000个时就会报这个错,我按分钟计算间隔,一天有1440分钟,超过了1000所以报错。

解决办法是在初始化参数中配置

  1. plotOptions: {
  2. series: {
  3. turboThreshold: 2000 // 或者更多,必须大于数组长度(1440)
  4. }
  5. }

设置完成后时间轴算是显示出来了,但是不正常,只显示其中的几个小时。 而且仍然没有数据,显示为一条直线。

后台明明是有数据传来的,怎么会得不到曲线呢?

后来才发现,数据库的字段是字符型的,所以传到前台js中也是字符型,要手动将其转为数值类型。

  1. parseFloat(chartdata[i][col]);

全部代码如下

  1. function drawChart(chartdata, col, cname) {
  2. var datasource = [];
  3. for (var i = 0; i < 60 * 24; i++) {
  4. if (chartdata[i]) {
  5. var tempval = parseFloat(chartdata[i][col]);
  6. datasource.push(tempval);
  7. }
  8. else {
  9. datasource.push(null);
  10. }
  11. }
  12.  
  13. var start = +new Date(GetNowFormatDate() + ' 00:00:00');
  14. var now = +new Date();
  15.  
  16. Highcharts.setOptions({
  17. global: { useUTC: false },
  18. lang: {
  19. contextButtonTitle: '导出',
  20. printChart: '打印图表',
  21. downloadJPEG: '导出为JPG',
  22. downloadPDF: '导出为PDF',
  23. downloadPNG: '导出为PNG',
  24. downloadSVG: '导出为SVG',
  25. loading: '加载中...'
  26.  
  27. }
  28. });
  29. console.log(datasource);
  30. $('#container').highcharts('StockChart', {
  31. chart: {
  32. events: {
  33. load: function () {
  34. if (!window.isComparing) {
  35. this.setTitle(null, {
  36. text: '加载完成共消耗 ' + (new Date() - now) + 'ms'
  37. });
  38. }
  39. }
  40. },
  41. animation: false,
  42. zoomType: 'x'
  43. },
  44. rangeSelector: {
  45. enabled: false
  46. },
  47. tooltip: {
  48. split: false,
  49. shared: true
  50. },
  51. credits: {
  52. enabled: false
  53. },
  54. yAxis: {
  55. title: {
  56. text: '监测值'
  57. }
  58. },
  59. title: {
  60. text: cname
  61. },
  62. series: [{
  63. name: '监测值',
  64. data: datasource,
  65. pointStart: start,
  66. dataLength: length,
  67. pointInterval: 1000 * 60,
  68. tooltip: {
  69. valueDecimals: 1,
  70. valueSuffix: ''
  71. }
  72. }],
  73. plotOptions: {
  74. series: {
  75. turboThreshold: 2000 // 或者更多,必须大于数组长度(1440)
  76. }
  77. }
  78. });
  79. }

解决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. 使用 JavaScript 截屏

    经常在微博上看到很多内容使用的什么长微博截图,并且截图上还附加了很多其他的信息.之前对纯前端截图有些研究,正好本博客有这个需求,今天就把这东西实现了下. 需要声明的是,JavaScript 目前还不能 ...

  2. Windows下运行Linux命令

    安装Gow软件,Gow-0.7.0.exe,这样就可以在Windows命令行运行Linux命令,比如通过scp把Windows下的文件拷贝到Linux下. 直接运行安装,不会生成任何客户端,直接使用W ...

  3. HDU 2062:Subset sequence(思维)

    Subset sequence Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Tot ...

  4. sdn的相关学习系列之一mininet的安装

    Ubuntu16.04安装mininet 1.安装git命令 sudo apt-get install git 2.从Github上下载Mininet官网的源码 git clone git://git ...

  5. C++学习(三十九)(C语言部分)之 游戏项目(2048游戏)

    /***************************项目 2048**********************c语言编写 图形库制作时间:2019.04.03 准备工具: vs2013 图形库 i ...

  6. spring aop无法拦截类内部的方法调用

    1.概念 拦截器的实现原理就是动态代理,实现AOP机制.Spring 的代理实现有两种:一是基于 JDK Dynamic Proxy 技术而实现的:二是基于 CGLIB 技术而实现的.如果目标对象实现 ...

  7. Linux tmpwatch命令详解

    Linux tmpwatch命令 Linux tmpwatch命令用于删除暂存文件. 执行tmpwatch指令可删除不必要的暂存文件,您可以设置文件超期时间,单位以小时计算 用法: tmpwatch ...

  8. SQL Agent 服务无法启动

    问题现象 从阿里云上镜像过来的一台的数据库服务器,SQL Agent服务启动不了,提示服务启动后停止. 如下是系统日志和SQL Agent的日志 SQLServerAgent could not be ...

  9. Spring boot 配置 mybatis xml和动态SQL 分页配置

    更新时间 2018年4月30日23:27:07 1.pom.xml <?xml version="1.0" encoding="UTF-8"?> & ...

  10. public class PageRender implements ResponseRender

    package cn.ubibi.jettyboot.demotest.controller.render; import cn.ubibi.jettyboot.framework.commons.S ...