zoukankan      html  css  js  c++  java
  • Highcharts动态画曲线

      使用Highcharts画曲线的过程中,有时候曲线个数是从数据库中取出来的,不能确定曲线的条数。

      可以利用Highcharts里的addSeries函数进行动态添加曲线:

      示例如下:

     1 for(var i=0;i<=<%=intRet %>;i++){
     2         var chart = $('#container').highcharts();
     3 
     4         newstr=strArray.pop();
     5 
     6         tempArray = newstr.split('a');
     7         //用于剔出空值与0值
     8         var isNum=false;
     9         //字符串存放到数字数组中
    10         for (var j = 1; j < tempArray.length-1;j++) {
    11                     numArray[j-1] = parseFloat(tempArray[j]);
    12             if ((!isNaN(numArray[j-1]))&&numArray[j-1]!=0) {
    13             isNum=true;
    14 
    15             }
    16                 }
    17     if(isNum){
    18         //向highcharts中画线
    19         chart.addSeries({
    20                               data: numArray,
    21                       name:curveNameArray[i],
    22                 pointStart: Date.UTC(year, month, datetime,00,00),
    23                         pointInterval: 5 * 60 * 1000
    24                           });
    25         }else{
    26         //向highcharts中画线
    27         chart.addSeries({
    28                               data: null,
    29                       name:curveNameArray[i],
    30                 pointStart: Date.UTC(year, month, datetime,00,00),
    31                         pointInterval: 5 * 60 * 1000
    32                           });
    33         }
    34     }    
    View Code

      示例中,曲线的条数是不确定的,利用一个for循环向chart中添加曲线:

      chart.addSeries({
        data: numArray,
        name:curveNameArray[i],
        pointStart: Date.UTC(year, month, datetime,00,00),
        pointInterval: 5 * 60 * 1000
       });

      这里需要注意的是,给data赋值的数组不能是字符串,需要进行转换。

      去除曲线上点的方法是设置marker 里的enabled为false

      plotOptions: {
      spline: {
      marker: {
        enabled: false
          }
        }

      },

        效果如下:
      

  • 相关阅读:
    如何判断轮廓是否为圆(算法更新)
    近期购置的CV&AI类图书梳理
    基于OpenCV实现“钢管计数”算法,基于Csharp编写界面,并实现算法融合
    大厂们的 redis 集群方案
    redis 突然大量逐出导致读写请求block
    Docker 1.13 管理命令
    玩转 Ceph 的正确姿势
    Docker 常用命令
    git常用命令
    从C++到GO
  • 原文地址:https://www.cnblogs.com/shuqiangji/p/4691534.html
Copyright © 2011-2022 走看看