Sie können mithilfe der annotierten Zeitleiste von Google in der Visualisierungs-API Anmerkungen unabhängig vom Datensatz einfügen? Statt

Question

kann ich Anmerkungen zu bestimmten Datensätzen auf dem Diagramm einfügen, aber ich wünschte, mehrere Linien auf dem Diagramm haben, ohne die Anmerkung mit einer bestimmten Zeile zuordnet, aber mit einem Datum.

Hier ist ein example von dem, was ich tun möchte. Beachten Sie die an die x-Achse angehängten Blasen und nicht eine bestimmte Linie im Diagramm.

Ich habe über die API gelesen und kann eine Option wie diese nicht sehen, aber frage mich, ob jemand einen Weg kennt.

Danke.

Answer 1

Keine Erfahrung, aber meine unmittelbare Reaktion war, dass man eine Reihe mit den mit allen Nullen als Datenfügter Anmerkungen versuchen könnte - und es aus der Legende ausschließen?

Answer 2

Wenn es Ihnen nichts ausmacht, ein SVG Line Chart mit Annotations zu verwenden, können Sie dies auch mit mehr Flexibilität neu erstellen. Wenn Sie die Anmerkungsspalte so einstellen, dass sie direkt den Werten der X-Achse folgt, werden die Anmerkungen ganz unten im Diagramm (auf der Achse) angezeigt und keiner Kategorie zugeordnet. Hier ist ein Beispiel:

function drawVisualization() { 
    // Create and populate the data table. 
    var data = new google.visualization.DataTable(); 
    data.addColumn('number','Day'); 
    data.addColumn({type: 'string', role: 'annotation'}); 
    data.addColumn({type: 'string', role: 'annotationText'}); 
    data.addColumn('number', '.DJI'); 
    data.addColumn('number', '.INX'); 
    data.addColumn('number', '.INIC'); 
    data.addRows([ 
    [1, null, null, 1000, 400, 300], 
    [2, 'A', 'did stuff', 1170, 460, 400], 
    [3, 'B', 'did more stuff', 660, 1120, 540], 
    [4, null, null, 1030, 540, 620], 
    [5, 'C', 'stopped stuff', 1070, 600, 700] 
    ]); 

    // Create and draw the visualization. 
    new google.visualization.LineChart(document.getElementById('visualization')). 
    draw(data, {focusTarget: 'category', 
        width: 500, height: 400, 
        vAxis: {maxValue: 10},} 
     ); 
} 

Dieser endet wie folgt aussehen: