Highcharts с новыми данными от jSON не работает

Question

Я успешно реализовал Highcharts, который работает очень хорошо. Мои высокие диаграммы получают данные в реальном времени каждые 1 минуту и ​​добавляют очки, которые делают так, как ожидалось. Но у меня есть определенная проблема: Мои старшие серии имеют две серии First - это линейка линейных рядов, а вторая - серия типов. Первая серия будет получать только 2 очка, а вторая - более 200 очков. Поскольку я сказал вам, что мои данные в прямом эфире, данные начинаются в 7 часов утра только для линейных и пустых данных для области до 9 часов ночи с точностью до 9 часов. Новые данные начнут появляться каждые 1 минуту до 12:30 вечера, но то, что происходит в 9:00 моей диаграмме идет на остановку и даже на следующий день на следующий день 7 утра моя остановка диаграммы

Но если я обновляю свой браузер, я получаю новые данные, и он начнет работать по мере необходимости.

Мой код следующим

$(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 в 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 после 9 AM

{"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]]} 

И он начнет получать новые данные в 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». Так оно и должно выглядеть так:

[{ данные: [[1367830800000, 7715,35], [1367843400000, 7715,35]] }, { данные: [[1367830831000, 7740,01], [1367830897000, 7735,61]] }]