Highcharts streuen externe Daten

Question

I Dokument erstellt mit highcharts Diagramm streuen

   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]] 
       }] 
      }); 

und das funktioniert. Dieser Code stammt von der Dokumentationsseite. Ich bekomme normale Streudaten wie auf dieser Seite Highcharts scatter jsfiddle Nun habe ich eine andere PHP-Datei erstellt, die mich mit Daten produziert, die ich tatsächlich brauche. Es ist in Dokument highcharts.php und Ergebnis ist dies

[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],

Wie Sie Daten an diese Highcharts.php-Datei verbinden? Ich habe einige Beispiele gefunden, aber ich kann es nicht zum Laufen bringen. Also für den Anfang brauche ich das, eine Zeile von Daten, um auf Streudiagramm zu zeigen. Ich habe einige Tage verloren und verstehe einfach nicht, was ich falsch mache.

Answer 1

Wenn Ihre PHP-Datei das oben dargestellte Array zurückgibt, müssen Sie es ein wenig analysieren, um es als Datenfeld in einer Scatter-Reihe zu verwenden. Zunächst sollten Daten Strings sein. Zweitens müssen Sie new Date() verwenden, um Date-Instanz zu erstellen, und getTime() verwenden, um Zeitstempel zurückzugeben. Ändern Sie außerdem den xAxis-Typ in datetime.

API-Referenz:
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

Beispiel:
http://jsfiddle.net/0025rsmt/