하이 차트 그래프가 표시되지 않습니다.

그래프 작업 중이지만 표시되지 않습니다.하이 차트 그래프가 표시되지 않습니다.

내 코드에는 작동중인 코드와 작동하지 않는 코드 두 줄이 있습니다. (내가 그들을 댓글을 달았)

//this line does not work 
//data3.push([new Date(d.timestamp).getTime(),data.data.risk); 

//this line works 
data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]);

내 목표 : 나는이 작동하지 않는 줄을 실행하려는 .

데이터를 제대로 전달하지 못하고 있다고 생각합니다. 그래프를 만들려면 risk 배열을 전달하고 싶습니다.

코드를 복사하여 파일에 붙여 넣기 만하면됩니다.

<!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> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 

</head> 

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

<div id="container2" style="max-width: 1666px; margin: 0 auto"></div> 

<script type="text/javascript"> 

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

        var minX = _.min(data.data.risk, function (d) { 
         return new Date(d.timestamp).getTime(); 
        }); 
        var maxX = _.max(data.data.risk, function (d) { 
         return new Date(d.timestamp).getTime(); 
        }); 


     var data3 = []; 

      $.each(data.data.risk, function (i, d) { 

         //this line does not work 
         //data3.push([new Date(d.timestamp).getTime(),data.data.risk); 

         //this line works 
         data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]); 
       }); 




     $('#container2').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: [{ 
       name: 'Graph', 
       data: data3 
      }] 
     }); 
    }); 

</script> 
</body> 
</html>

출처

2016-06-30 Simon

는 콘솔에 어떤 오류가 발생 했습니까? – abarisone

나는 당신이 risk에서 value 년대를 원하는 가정합니다. 당신은 이미이 줄 risk의 각 항목을 반복했다 : data3.push([new Date(d.timestamp).getTime(),d.value]);

당신은 아래의 예를 확인할 수 있습니다 $.each(data.data.risk, function (i, d) {

는 risk의 값이 줄을 사용하세요.

<!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> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script> 

    </head> 

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

    <div id="container2" style="max-width: 1666px; margin: 0 auto"></div> 

    <script type="text/javascript"> 

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

         var minX = _.min(data.data.risk, function (d) { 
          return new Date(d.timestamp).getTime(); 
         }); 
         var maxX = _.max(data.data.risk, function (d) { 
          return new Date(d.timestamp).getTime(); 
         }); 


      var data3 = []; 

       $.each(data.data.risk, function (i, d) { 

          //this line does not works 
          data3.push([new Date(d.timestamp).getTime(),d.value]); 

          //this line works 
          // data3.push([new Date(d.timestamp).getTime(),data.data.threshold[0].amber_threshold]); 
        }); 




      $('#container2').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: [{ 
        name: 'Graph', 
        data: data3 
       }] 
      }); 
     }); 

    </script> 
    </body> 
    </html>

출력 :

출처

2016-06-30 08:58:03

감사합니다 ... 그 작업 ... 왜 그래프를 렌더링하는 데 너무 오래 걸리는지? – Simon

전체 코드를 복사하여 붙여 넣으십시오. 2 분 정도 기다려. 귀하의 json은 거대한 데이터를 가지고 –

그냥 8000 점 ... 그래서 어떤 생각이 왜 그렇게 오래 걸릴까요? 나는 더 많은 점을 가진 그래프를 그렸습니다 10,000 점 그리고 그들은 다음이 빨리 렌더링 ... – Simon

하이 차트 그래프가 표시되지 않습니다.

답변

관련 문제