Highcharts.jsはグラフの行を見ることができません

私はlocalchartでhighcharts.jsを使って折れ線グラフを作成しています。Highcharts.jsはグラフの行を見ることができません

私は2万以上のレコードを実装しようとしており、スムーズに動作します。は魅力的です。

しかし、私は11,000レコードを含むjsonファイルを持っていますが、何かの不明な理由のため、私はそれを実行するとグラフの行が表示されません。

私は3000以下のレコードを表示する小切手を入れたら、私はその行を見ます。

ちょうどhtmlファイルにコードを貼り付けてコピーすればうまくいくはずです。

<!DOCTYPE html> 
<html> 

<head> 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 

</head> 

<body style="background:#212224;"> 

<div id="container" style="max-width: 1666px; margin: 0 auto"></div> 
<button id="button">Destroy the chart</button> 
<button id="create">create the chart</button> 


<script type="text/javascript"> 

     $('#button').click(function() { 
     $('#container').highcharts().destroy(); 
      }); 

    $('#create').click(function(){ 
    $.getJSON('https://dl.dropboxusercontent.com/u/76618626/data2.json', function (data) { 
     console.log("data size is : "); 
     console.log(data.data.length);  

     var data3 = []; 

     //you can comment this loop and uncomment the loop below for working code.  
     $.each(data.data,function(i,d){ 
      data3.push([new Date(d.timestamp).getTime(),d.value]) 
      }); 

     //below is commented code which works for 3000 records. 

     //$.each(data.data,function(i,d){ 
     //if(i<3000){ 
     //  data3.push([new Date(d.timestamp).getTime(),d.value]) 
     //  } 
     //}); 



     console.log(data3); 

     $('#container').highcharts({ 

      chart: { 
      backgroundColor: '#000000', 
       }, 

      title: { 
       text: 'Test Graph', 
       style: { 
       color: '#FFFFFF', 
       fontWeight: 'bold' 
       } 
      }, 
      xAxis: { 
       type: 'datetime', 
       title: { 
        text: 'Time Stamp' 
       }, 
       gridLineColor: 'grey', 
       gridLineWidth: 1, 
       lineWidth:1 

      }, 
      yAxis: { 
       title: { 
        text: 'Value' 
       }, 
       gridLineColor: 'grey', 
       gridLineWidth: 1, 
       lineWidth:1 
      }, 
      legend: { 
       enabled: true 
      }, 

      exporting: false, 



      plotOptions: { 
       line: {     
        lineColor: 'red', 
        fillOpacity: 1,      
        lineWidth: 2, 
        states: { 
         hover: { 
          lineWidth: 2 
         } 
        }, 
        threshold: null, 
        marker: { 
         fillColor: '#e57255' 
         } 


       }, 


      }, 


      series: [{ 
       type: 'line', 
       name: 'test', 
       data: data3 
      }] 
     }); 
    }); 
}); 
</script> 
</body> 
</html>

出典

2016-06-23 Steve

こんにちは、私はあなたのすべてのデータが正しいか、それはあなたが持っている理由です、あなたの問題は、あなたのデータに接続されていることはないと思いますこの問題。ここでは、正しいデータでどのように動作するかの例を見つけることができます：http://jsfiddle.net/pg5gjogb/3/ –

ありがとう!!!! :-) – Steve

すべてのデータが正しくフォーマットされていることを確認してください。現在、正しくフォーマットされていないデータがあります。あなたはこのようなものを使用して簡単なチェックを実行することができます。

$.each(data.data,function(i,d){ 
    // Return if value is not a number 
    if (isNaN(parseInt(d.value))) return; 
    data3.push([new Date(d.timestamp).getTime(),d.value]) 
});

Updated Fiddle

出典

2016-06-23 12:29:23 Und3rTow

ありがとうございました！ !!!! ....この問題は私を夢中にさせていた。 – Steve

@Steve将来のユーザーにも役立つように、回答を承認済み（緑色のダニ）としてマークすることを忘れないでください！ – Und3rTow

Highcharts.jsはグラフの行を見ることができません

答えて

関連する問題