Google Combo Chart aggiunge linee orizzontali e verticali nel grafico delle colonne

Question

Come creo un grafico combinato di Google che replica l'immagine qui sotto? Sembra che una volta aggiunta la colonna per la linea verticale, le colonne verdi perdano la proprietà GroupWidth e si trasformino in linee magre.

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

Ecco un jsfiddle: http://jsfiddle.net/vmb4odkt/

Answer 1

il tutto può usare un po 'di pulizia in particolare a seconda dei dati finali, ma qui è una buona soluzione credo. Ho usato i metodi di ispezione per scoprire dove sulla div della tabella dovrebbe andare la linea e quindi aggiungere un nuovo div per tracciare la linea sul grafico SVG. È possibile aggiungere allo stesso modo un nodo SVG all'elemento SVG nel DOM.

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

ho dovuto fare il div contenitore position: relative fare calcoli più facile.

Il codice principale è questo:

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

Tutti i valori hardcoded può essere rimosso e sostituito con calcoli o costanti a seconda della sorgente di dati.