Highcharts沒有表現出一系列的數據與javascript函數

Question

我對highcharts一個.js代碼：

$(function loadTransactionsLevel() { 
    //Auto call function, for 1 minute 
    setInterval(loadTransactionsLevel, 60000); 

    var nowDate = new Date(); 
    var nowYear = nowDate.getFullYear(); 
    var nowMonth = (nowDate.getMonth()+1); 
    var nowDay = nowDate.getDate(); 
    var nowHour = nowDate.getHours(); 
    var nowMinus10Minutes = (nowDate.getMinutes() - 10); 
    var nowMinutes = (nowDate.getMinutes() - 1); 

    Highcharts.setOptions({ 
     lang: { 
      loading: 'Cargando...', 
      months: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'], 
      weekdays: ['Domingo', 'Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado'], 
      shortMonths: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'], 
      exportButtonTitle: "Exportar", 
      printButtonTitle: "Importar", 
      rangeSelectorFrom: "Desde", 
      rangeSelectorTo: "Hasta", 
      rangeSelectorZoom: "Período", 
      downloadPNG: 'Descargar imagen PNG', 
      downloadJPEG: 'Descargar imagen JPEG', 
      downloadPDF: 'Descargar imagen PDF', 
      downloadSVG: 'Descargar imagen SVG', 
      printChart: 'Imprimir', 
      resetZoom: 'Reiniciar zoom', 
      resetZoomTitle: 'Reiniciar zoom', 
      thousandsSep: ",", 
      decimalPoint: '.' 
     } 
    }); 


    $('#liveTransactionsLevel').highcharts({ 
     chart: { 
      type: 'column', 
      backgroundColor: '#333333' 
     }, 
     title: { 
      text: 'Traffic Level3', 
      style: { 
       color: '#dedede' 
      } 
     }, 
     subtitle: { 
      text: 'Messages passed', 
      style: { 
       color: '#dedede' 
      } 
     }, 

     credits: { 
      enabled: false 
     }, 

     tooltip: { 
      formatter: function() { 
       return '<b>' + this.series.name + '</b><br/>' + 
        Highcharts.dateFormat('%A %d de %B de %Y', (new Date(nowYear + '-' + nowMonth + '-' + nowDay)), false) + ': ' + 
        '<b>' + Highcharts.numberFormat(this.y, 0) + '</b>'; 
      } 
     }, 

     legend: { 
      enabled: false 
     }, 

     plotOptions: { 
      area: { 
       fillColor: { 
        linearGradient: { 
         x1: 0, 
         y1: 0, 
         x2: 0, 
         y2: 1 
        }, 
        stops: [ 
         [0, Highcharts.getOptions().colors[2]], 
         [1, Highcharts.Color(Highcharts.getOptions().colors[2]).setOpacity(0).get('rgba')] 
        ] 
       }, 
       marker: { 
        radius: 2 
       }, 
       lineWidth: 1, 
       states: { 
        hover: { 
         lineWidth: 1 
        } 
       }, 
       threshold: null 
      }, 

      series: { 
       animation: false 
      } 
     }, 

     xAxis: { 
      title: { 
       text: Highcharts.dateFormat('%A %d de %B de %Y', (new Date(nowYear + '-' + nowMonth + '-' + nowDay)), false), 
       style: { 
        color: '#AAAAAA' 
       } 
      }, 

      labels: { 
       style: { 
        color: '#dedede' 
       } 
      }, 

      type: 'datetime', 
      min: Date.parse(nowYear + "-" + nowMonth + "-" + nowDay + " " + nowHour + ":" + nowMinus10Minutes + " UTC"),//Date.UTC(nowYear, nowMonth, nowDay, nowHour, nowMinus10Minutes), 
      max: Date.parse(nowYear + "-" + nowMonth + "-" + nowDay + " " + nowHour + ":" + nowMinutes + " UTC"),//Date.UTC(nowYear, nowMonth, nowDay, nowHour, nowMinutes), 
      showEmpty: true, 
      tickInterval: 1000 * 60, // one minute 
      tickPixelInterval: 10 
     }, 


    yAxis: { 
      title: { 
       text: 'Success', 
       style: { 
        color: '#dedede' 
       } 
      }, 

      labels: { 
       style: { 
        color: '#dedede' 
       } 
      }, 

      allowDecimals: false, 
      min: 0, 
      max: null, 
      showEmpty: true 
     }, 

     series: [{ 
      type: 'column', 
      color: '#5DC05D', 
      lineWidth: 2, 
      name: 'Messages passed', 
      data: getData() 
     }] 
    }); 
}); 


function getData() { 

    var array_keys = []; 
    var array_values = []; 
    var data = []; 

    $.ajax({ 
     type: "GET", 
     url: "http://localhost:8080/flkLive/ws/root/success", 
     data: "", 
     success: function(values){ 

      for (var key in values) { 
       if (values.hasOwnProperty(key)) { 

        array_keys.push(key); 
        array_values.push(values[key]); 
       } 
      } 

      array_keys.sort(); 
      array_values.sort(); 

      for (var i = 0; i < array_keys.length; i++){ 

       data[i] = [ 
        [ Date.parse(array_keys[i] + " UTC"), array_values[i] ] 
       ] 
      } 

      alert(data); 
      return data; 
     } 
    }); 
} 

但是當我運行該項目，highcharts沒有顯示任何數據，有什麼不對？

下面是一個值的圖像格式顯示（time_in_milliseconds，int_value）：

Answer 1

的問題是，在當的getData由圖表調用該點的數據是空的，這就是返回到圖表......實際上甚至沒有，因爲你的函數沒有return語句，所以我的猜測是它會返回undefined。

ajax調用來獲取您的數據是通過但異步發送，所以在成功函數上，即使您返回數據，該數據也無濟於事。

你需要做的是既可以在Ajax回調圖表，或使用這樣的聲明把數據在圖表中，並刷新：

chart.series[0].setData(data,true); 

圖中這種情況下，一定是你的圖表存儲在這樣的變量：

var chart = $('#liveTransactionsLevel').highcharts({ 
... }) 

您還需要返回staement爲了避免圖表初始化與「未定義」崩潰的東西添加到您的getData溫控功能。 爲了做到這一點，你需要你結束的getData（）函數之前移動這一權利：

return data; 

這樣，你就會有一個空的圖表，這將得到填充當Ajax調用完成後獲得數據。