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调用完成后获得数据。