浏览器在使用Highcharts绘制超过10000个系列时被绞死

时间:2014-11-26 07:15:19

标签: javascript highcharts highstock

我需要你的帮助,我正在完成一项任务,我必须在一张图表上绘制最大10000系列。每次我有1000,1500或2000到10000的随机数系列。我成功地将它们放在图表对象中,但是当我将数据对象分配给图表类时,我的浏览器会被挂起几秒钟。这是我的代码,

var obj =  {
           credits: {
                 enabled: false
             },
           title: {
                         text: 'Sentiment Activity Of Stocks'
                     },
           chart: {
                     width: 1200
                     },
           exporting: {
                    enabled: false
           },

               xAxis: {
                   min: -5,
                   max:5,
                   title: {
                        enabled: true,
                        text: '<b>S Score</b>',
                        style: {
                            fontWeight: 'normal'
                        }
                    }
              },
               yAxis: {
                   title: {
                     enabled: true,
                     text: '<b>S Score</b>',
                     style: {
                         fontWeight: 'normal'
                     }
                 }

               },
           plotOptions: {
                         line: {
                             marker:{
                                 symbol:"circle"
                             }
                         },


                         },
           tooltip: {
               formatter: function () {

                    var x = this.x;
                    x = x.toFixed(4);

                    var y = this.y;
                       y = y.toFixed(4);

                      var delta = parseFloat(this.series.data[1].x-this.series.data[0].x);
                          delta = delta.toFixed(4);

                      return ' <b>'+ this.series.name +'<br/> <b>Score ( t ): </b>' + y +
                            '<br /> <b>Score(t-1): </b>' + x + '<br />'+
                            '<b>SDelta: </b>' + delta + '<br />'+
                          '<br/>';

               }
           },
               legend: {
                   enabled: false
               },
               series: [
               ]

  };


          $.each(parsedJson ,function(index, element) {
          var s_color = "Green";
          if(element.sdelta < 0)
             s_color = "red";

          var diffe  = parseFloat(element.sscore-element.sdelta);
          var sscore = exp_y = parseFloat(element.sscore);

          if(sscore > diffe){
              var arr =  {data: [[diffe,exp_y],[sscore, exp_y]],name:element.subject,color:s_color,id:element.subject};
          }else{
              var arr =  {data: [[sscore, exp_y],[diffe,exp_y]],name:element.subject,color:s_color,id:element.subject};
          }

          obj.series.push(arr);
        });

       $('#container').highcharts(obj);

我不确定浏览器挂起的实际原因是什么。没有可能有一些限制。在一个图表中的系列。非常感谢您的帮助,以确定此问题背后的原因。

1 个答案:

答案 0 :(得分:1)

hith highcharts网站上有一篇关于性能问题的文章。你可以在这里阅读:

http://www.highcharts.com/component/content/article/2-news/48-loading-millions-of-points-in-highcharts

您可以尝试一些指示:

  1. 禁用动画。这真的可以让事情变得非常糟糕。
  2. 尝试使用highstock代替。 Highstock可以应对更大的数据集。
  3.     chart: {
            animation: false
        },