Highcharts分散外部數據

Question

我創建的文檔與highcharts散點圖

   Highcharts.chart('container', { 
       chart: { 
        type: 'scatter', 
        zoomType: 'xy' 
       }, 
       title: { 
        text: '' 
       }, 
       subtitle: { 
        text: '' 
       }, 
       xAxis: { 
        title: { 
         enabled: true, 
         text: 'Date of entry' 
        }, 
        startOnTick: true, 
        endOnTick: true, 
        showLastLabel: true 
       }, 
       yAxis: { 
        title: { 
         text: 'Values' 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        align: 'left', 
        verticalAlign: 'top', 
        x: 100, 
        y: 70, 
        floating: true, 
        backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF', 
        borderWidth: 1 
       }, 
       plotOptions: { 
        scatter: { 
         marker: { 
          radius: 5, 
          states: { 
           hover: { 
            enabled: true, 
            lineColor: 'rgb(100,100,100)' 
           } 
          } 
         }, 
         states: { 
          hover: { 
           marker: { 
            enabled: false 
           } 
          } 
         }, 
         tooltip: { 
          headerFormat: '<b>{series.name}</b><br>', 
          pointFormat: 'Dana {point.x} = {point.y}' 
         } 
        } 
       }, 
       series: [{ 
        name: 'Values', 
        color: 'rgba(223, 83, 83, .5)', 
        data: [[167.6, 64.5], [167.6, 72.3], [167.6, 61.4]] 
       }] 
      }); 

和工作原理。此代碼來自文檔頁面。我得到了像這個頁面上的正常分散數據Highcharts scatter jsfiddle 現在，我創建了另一個PHP文件，該文件生成了我實際需要的數據。它是在文件highcharts.php和結果是這樣的

[07.03.2017,21000],[07.03.2017,25000],[07.03.2017,33000],[07.03.2017,27000],[07.03.2017,30000],[01.01.2017,700],[11.05.2017,0],[11.05.2017,0],[11.05.2017,0],[11.05.2017,0],

如何將數據連接到這個highcharts.php文件？我找到了一些例子，但我無法實現它的工作。所以開始我需要這個，一行數據顯示在散點圖上。我失去了幾天，只是不明白我做錯了什麼。

Answer 1

如果你的PHP文件返回上面提到的數組，你需要對它進行一點解析，以便將它用作散佈系列中的數據數組。首先，日期應該是字符串。其次，您需要使用new Date()來創建Date實例並使用getTime()來返回時間戳。另外，將xAxis類型更改爲datetime。

API參考：
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime

例子：
http://jsfiddle.net/0025rsmt/