Google Combo Chart horizontale und vertikale Linie in Säulendiagramm hinzufügen

Question

Wie erstelle ich ein Google Combo-Diagramm, das das Bild unten repliziert? Es scheint, sobald ich die Spalte für die vertikale Linie hinzufügen, verlieren die grünen Spalten ihre groupWidth -Eigenschaft und verwandeln sich in dünne Linien. Hier

data.addColumn('number', 'X'); 
    data.addColumn('number', 'Y'); 
    data.addColumn('number', 'Average'); 
    data.addColumn('number', 'Vertical Line'); 

    data.addRows([ 
     [1, 5, 3, null], 
     [3, 4, 3, null], 
     [5, 2, 3, null], 
     [2, null, null, 0], // add vertical line 
     [2, null, null, 5], 
    ]); 

ist ein jsfiddle: http://jsfiddle.net/vmb4odkt/

Answer 1

Das Ganze vor allem eine gewisse Bereinigung verwenden können je nach endgültigen Daten, aber hier ist eine gute Lösung, denke ich. Ich habe die Inspektionsmethoden verwendet, um herauszufinden, wo auf dem Div des Diagramms die Linie liegen sollte, und dann ein neues Div hinzufügen, um die Linie über das SVG-Diagramm zu zeichnen. Sie können auf ähnliche Weise einen SVG-Knoten zum SVG-Element im DOM hinzufügen.

http://jsfiddle.net/vmb4odkt/2/

Ich hatte den Container div position: relative um Berechnungen zu erleichtern.

Der Hauptcode ist dies:

var line = document.createElement("div"); 
var interface = chart.getChartLayoutInterface(); 
var cli = chart.getChartLayoutInterface(); 
line.style.background = "red"; 
line.style.width = "2px"; 
line.style.position = "absolute"; 
line.style.left = (interface.getXLocation(2) - 1) + "px"; 
line.style.top = interface.getYLocation(5) + "px"; 
line.style.height = (interface.getYLocation(1) - interface.getYLocation(5)) + "px"; 
el.appendChild(line); 

Alle der fest codierten Werte können entfernt und mit entweder Berechnungen oder Konstanten in Abhängigkeit von der Datenquelle ersetzt werden.