2016-09-05 2 views
1

Ich habe mehrere Sammlungen von Daten, die ich in einem einzigen Google-Diagramm anzeigen möchte. Jede Serie ist eine Sammlung von CPM mit Datum ein:Google-Diagramm mit mehreren Daten

zum Beispiel:

series A[ 
    '2016-09-01' => 2.08023, 
    '2016-09-04' => 2.01123 
]; 

series B[ 
    '2016-09-01' => 1.99324, 
    '2016-09-02' => 2.00112 
]; 

Beachten Sie, dass die Daten in den beiden Serien sind nicht das gleiche. Ich möchte diese beiden Grafiken in einem einzigen Google-Diagramm zeichnen. Wie sollte ich die Datenzeilen formatieren (wenn dies überhaupt möglich ist).

Ich habe eine JSFiddle mit was ich dachte, wäre ein Weg zu gehen, aber das Hinzufügen einer Null in der Datentabelle funktioniert nicht, ich bekomme zwei Punkte für die erste Serie, wo ich eine Zeile erwartet. Wie kann ich Google-Diagramm zeichnen die Linie anstelle der Punkte?

Antwort

1

in der Geige, sind die Daten-Setup richtig

jedoch, da es einen ist null Wert Serie A aufgrund der unterschiedlichen Termine

Notwendigkeit configuration optioninterpolateNulls: true

von der verwenden Dokumentation ...

interpol teNulls
Ob der Wert der fehlenden Punkte erraten werden soll. Wenn dies der Fall ist, wird der Wert fehlender Daten basierend auf benachbarten Punkten geschätzt. Wenn es falsch ist, wird es eine Unterbrechung in der Linie an dem unbekannten Punkt hinterlassen.

folgenden Arbeits Schnipsel sehen ...

google.charts.load('current', {'packages':['corechart']}); 
 
google.charts.setOnLoadCallback(drawChart); 
 

 
function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
 
    data.addColumn('date', 'X'); 
 
    data.addColumn('number', 'series a'); 
 
    data.addColumn('number', 'series b') 
 
    data.addRows([ 
 
    [new Date(1472688000000), 2.08023, 1.99324], 
 
    [new Date(1472774400000), null, 2.00112], 
 
    [new Date(1472947200000), 2.01123, null] 
 
    ]); 
 

 
    var options = { 
 
    interpolateNulls: true 
 
    }; 
 

 
    var container = document.getElementById('chart_div'); 
 
    var chart = new google.visualization.LineChart(container); 
 
    chart.draw(data, options); 
 
}
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div>

Verwandte Themen