2016-08-09 3 views
-3

HightCharts realtime line errorHightChartsリアルタイムラインエラー

誰が次の問題がありますか?

+4

あなたは何をしていた上で詳しく説明してもらえますし、我々は問題を調査することができますので、正確に何のエラーが – Prateek

+2

であることは、あなたの問題とポストのライブの例について、より具体的な情報を提供してもらえますか? –

+0

私の質問に申し訳ありません。質問はここ初めてです。ほんの数日前に、私はリアルタイムの折れ線グラフを得るために公式のウェブサイトの例に従いました。リンク ''、しかし、私はページを実行するとyestoday、私はFireFoxで、吹き出しの写真として問題を発見した。後で、私はハイチャートのバージョンが異なることを発見、上記のリンクv4.2.6、v4.2.5が正しいです。 [写真](http://i.stack.imgur.com/Cvbey.png)。 – Eliza

答えて

0
var loadChart = function() { 
     $.getJSON('data.json', function (json) { 
      var index = 0; 

      var getData = function (index, type) { 
       var result = null; 
       if (type != undefined) { 
        result = parseInt(json[index][type]); 
       } else { 
        result = json[index]; 
       } 
       return result; 
      }; 

      var getSeriesData = function() { 
       // 结构 
       var JJData = [], 
        PCData = [], 
        PhoneData = [], 
        item; 
       var time = (new Date()).getTime(); 

       for (var i = -179; i <= 0; ++i) { 
        item = json[index++]; 
        JJData.push({ 
         x: time + i * 2000, 
         y: parseInt(item.JJ) 
        }); 
        PCData.push({ 
         x: time + i * 2000, 
         y: parseInt(item.PC) 
        }); 
        PhoneData.push({ 
         x: time + i * 2000, 
         y: parseInt(item.Phone) 
        }); 
       } 
       var result = [{ 
        name: "JJ", 
        data: JJData 
       }, { 
        name: "PC", 
        data: PCData 
       }, { 
        name: "Phone", 
        data: PhoneData 
       }]; 
       return result; 
      }; 

      chart = new Highcharts.Chart({ 
       chart: { 
        renderTo: 'container1', 
        type: 'spline', //spline 
        backgroundColor: 'rgba(202, 202, 202, 0.2)', 
        animation: Highcharts.svg, // don't animate in old IE 
        //marginRight: 10, 
        events: { 
         load: function() { 
          var series = this.series; 

          loadMinuteData = function() { 
           if (!minuteFlag) { 
            clearInterval(setMinuteInter); 

            return false; 
           } 
           var x = (new Date()).getTime(); // current time 
           var result = getData(index++); 
           // 第三个参数为true,移除最开始的数据 
           //console.log("minute"); 
           //console.log(series[0]); 
           //alert(series[0]); 
           series[0].addPoint([x, parseInt(result.JJ)], true, true); 
           series[1].addPoint([x, parseInt(result.PC)], true, true); 
           series[2].addPoint([x, parseInt(result.Phone)], true, true); 
          }; 
          var setMinuteInter = setInterval(loadMinuteData, 2000); 
         } 
        } 
       }, 
       title: { 
        text: '实时在线人数' 
       }, 
       xAxis: [{ 
        type: 'datetime', 
        tickPixelInterval: 60 
       }], 
       yAxis: { 
        title: { 
         text: '人数' 
        }, 
        plotLines: [{ 
         value: 0, 
         width: 1, 
         color: '#808080' 
        }] 
       }, 
       plotOptions: { 
        spline: { 
         marker: { 
          enabled: false 
         } 
        } 
       }, 
       tooltip: { 
        formatter: function() { 
         return '<b>' + this.series.name + '</b><br/>' + 
          Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + 
          Highcharts.numberFormat(this.y, 2); 
        } 
       }, 
       legend: { 
        enabled: true 
       }, 
       exporting: { 
        enabled: false 
       }, 
       series: getSeriesData() 
      }); 
     }); 
    } 
+0

これは私のチャート構成です。 – Eliza

+1

あなたのデータはどのように見えますか?残念ながら、関数getSeriesData()が返す情報とaddPoint()で追加する値はありません。値をハードコードして問題を紹介できますか? –

+0

こんにちはEliza、私たちにあなたのコードを提供していただきありがとうございます。セバスチャンが書いたように、問題が何であるかを正確に示すために、ハードコーディングされた値を与えることができれば幸いです。今のところあなたの問題は、loadイベント関数内のaddPointメソッドと関連していると思います。系列にポイントを追加するたびにチャートを再描画しています。チャートを素早く再描画していると、問題が発生することがあります。すべてのaddPointではなくchart.redraw()でグラフを再描画しないようにしてください。この例を見て、それがどのように機能するかを見てください:http://jsfiddle.net/hzww145d/3/ –