jSON의 새로운 데이터가있는 하이 차트가 작동하지 않습니다.

Question

Highcharts를 성공적으로 구현하여 매우 효과적입니다. 내 highcharts는 매 1 분마다 실시간 데이터를 가져오고 예상대로 진행되는 포인트를 추가합니다. 하지만 특정 문제가 있습니다. 내 하이 차트에 두 개의 시리즈가 있습니다. 첫 번째는 라인 유형 시리즈이고 두 번째는 영역 유형 시리즈입니다. 첫 번째 시리즈는 항상 2 포인트 만 얻고 두 번째 시리즈는 200 포인트 이상을 얻습니다. 내가 말한대로 내 데이터는 실시간으로 오전 9시에 오전 9 시까 지 정확한 오전 9시에 오전 7시에 새 데이터가 매 1 분마다 12시 30 분까지 시작되지만 9시에 어떤 일이 발생합니까? 그 다음날 새벽 7시에 내 차트 중지

그러나 브라우저를 새로 고침하면 새로운 데이터가 나오고 필요에 따라 작동하기 시작합니다.

내 코드 오전 9시

{"maxX":"1367843400000","minX":"1367830800000","maxY":"7912","minY":"7511","tickIntervalY":"80","lineSeriesName":"Open","areaSeriesName":"Price Index","lineSeriesData":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaSeriesData":[[1367830831000,7740.01],[1367830897000,7735.61]]} 

후 오전 7시

{"maxX":"1367843400000","minX":"1367830800000","maxY":"7912","minY":"7511","tickIntervalY":"80","lineSeriesName":"Open","areaSeriesName":"Price Index","lineSeriesData":[[1367830800000,7715.35],[1367843400000,7715.35]],"areaSeriesData":[]} 

내 JSON 데이터에

$(function() { 
    $('#container').highcharts({ 
     credits: { 
      enabled: 0 
     }, 
     title: { 
      text: null 
     },  
     xAxis: { 
      type: 'datetime', 
      dateTimeLabelFormats: { 
       minute: '%H:%M' 
      }, 
      max: <%= MilliTimeStamp(_closingTime) %> , 
      min: <%= MilliTimeStamp(_openingTime) %> , 
      tickInterval: 0.5 * 3600 * 1000, 
      minorTickInterval: 0.1 * 3600 * 1000, 
      title: { 
       text: null 
      }, 
      lineWidth: 1, 
      minorGridLineWidth: 1, 
      endOnTick: true, 
      showLastLabel: true, 
      gridLineWidth: 1, 
      labels: { 
       style: { 
        font: '7.5pt Trebuchet MS' 
       } 
      }, 
      reversed: <%= isArabic %> // true for arabic layout and false for english layout 
     }, 
     yAxis: { 
      title: { 
       text: null 
      }, 
      max: <%= maxY %> , 
      min: <%= minY %> , 
      endOnTick: true, 
      showLastLabel: true, 
      labels: { 
       style: { 
        font: '7.5pt Trebuchet MS' 
       } 
      }, 
      opposite: <%= isArabic %> // true for arabic layout and false for english layout 
     }, 
     legend: { 
      enabled: false 
     }, 
     plotOptions: { 
      area: { 
       fillColor: { 
        linearGradient: { 
         x1: 0, 
         y1: 0, 
         x2: 0, 
         y2: 1 
        }, 
        stops: [ 
         [0, Highcharts.getOptions().colors[0]], 
         [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')] 
        ] 
       }, 
       lineWidth: 1, 
       marker: { 
        enabled: false 
       }, 
       shadow: false, 
       states: { 
        hover: { 
         lineWidth: 1 
        } 
       }, 
       threshold: null 
      }, 
      line: { 
       lineWidth: 1, 
       marker: { 
        enabled: false 
       }, 
       shadow: false, 
       states: { 
        hover: { 
         lineWidth: 1 
        } 
       }, 
       threshold: null 
      } 
     }, 
     tooltip: { 
      formatter: function() { 
       return '<span style="font-size:7.5pt;">' + Highcharts.dateFormat('%A, %e %B, %H:%M', this.points[0].x) + '</span><br><span style="color:' + this.points[0].series.color + ';">' + this.points[0].series.name + '</span>: <b>' + Highcharts.numberFormat(this.points[0].y, 0) + '</b>'; 
      }, 
      useHTML: true, 
      shared: true 
     }, 
     series: [{ 
      type: 'area', 
      data: [] 
     }, { 
      type: 'line', 
      color: 'Red', 
      data: [] 
     }] 
    }); 

    <% 
    if (isArabic == "true") { %> Highcharts.setOptions({ 
      lang: { 
       months: <%= months %> , 
       weekdays: <%= days %> 
      } 
     }); <% 
    } %> 

    $.ajaxSetup({ 
     cache: false 
    }); 
    recieveData(); 
}); 

function recieveData() { 
    var pathArray = window.location.pathname.split('/'); 
    var chart = $('#container').highcharts(); 
    $.ajax({ 
     url: '/' + pathArray[1] + '/HomePageChartData.aspx', 
     dataType: 'json', 
     cache: false, 
     data: { 
      'time': new Date().getSeconds() 
     }, 
     success: function (data) { 
      chart.yAxis[0].setExtremes(data.minY, data.maxY, true, true); 
      chart.series[1].setData([]); 
      chart.series[1].name = data.lineSeriesName; 

      chart.series[0].setData([]); 
      chart.series[0].name = data.areaSeriesName; 

      for (var x in data.lineSeriesData) { 
       chart.series[1].addPoint([data.lineSeriesData[x][0], data.lineSeriesData[x][1]]); 
      } 

      for (var x in data.areaSeriesData) { 
       chart.series[0].addPoint([data.areaSeriesData[x][0], data.areaSeriesData[x][1]]); 
      } 
      setTimeout(recieveData, 60000); 
     } 
    } 
    }); 
} 

내 JSON 데이터를 다음과 그리고 그것은 areaSeriesData에 새로운 데이터를 얻기 시작으로 1 분마다

@@ 업데이트

오전 7시와 오전 9시에 데이터를 가져 오지 못하고 빈 문자열이 나왔으므로 오류가 발생하여 처리하지 못했던 것 같습니다. 이제 다음과 같이 변경합니다. 시리즈를 제거하지만 지금은 데이터가있는 오전 7시에 라인에 대한 시리즈를 얻지 못하고 있습니다. 누군가가 내가 무엇을 놓치고 있는지 또는 여기에서 잘못하고 있는지 말해 줄 수 있습니까?

function recieveData() { 
    var pathArray = window.location.pathname.split('/'); 
    var chart = $('#container').highcharts(); 
     $.ajax({ 
      url: '/' + pathArray[1] + '/_layouts/KSE.SharePoint/HomePageChartData.aspx', 
      dataType: 'json', 
      cache: false, 
      data:{'time': new Date().getSeconds() }, 
      success: function (data) { 
       chart.yAxis[0].setExtremes(data.minY, data.maxY, true, true); 
       chart.series[1].setData([]); 
       chart.series[1].name = data.lineSeriesName; 

       chart.series[0].setData([]); 
       chart.series[0].name = data.areaSeriesName; 

       for (var x in data.lineSeriesData) { 
       chart.series[1].addPoint([data.lineSeriesData[x][0], data.lineSeriesData[x][1]]); 
       } 

       for (var x in data.areaSeriesData) { 
       chart.series[0].addPoint([data.areaSeriesData[x][0], data.areaSeriesData[x][1]]); 
       } 
       setTimeout(recieveData, 60000); 
      }, 
      error: function() { 
       setTimeout(recieveData, 60000); 
      } 
      }); 
} 

Answer 1

시리즈에 대한 별도의 데이터를 준비하려면 json을 구문 분석해야합니다. "lineSeriesData"또는 "areaSeriesData"대신에 데이터를 사용해야합니다. 따라서 정상적으로 보이는 같은

[{ 데이터 : [1,367,830,800,000, 7715.35, [1,367,843,400,000, 7715.35] }, { 데이터 : [1,367,830,831,000, 7740.01, [1,367,830,897,000, 7735.61] }