Google Combo Chart dodaje linię poziomą i pionową na wykresie kolumnowym

Question

Jak utworzyć wykres Combo Google, który skopiuje poniższy obrazek? Wydaje się, że po dodaniu kolumny do pionowej linii zielone kolumny tracą swoją właściwość groupWidth i zmieniają się w cienkie linie.

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

Oto jsfiddle: http://jsfiddle.net/vmb4odkt/

Answer 1

Cała sprawa może korzystać z niektórych porządki zwłaszcza w zależności od ostatecznych danych, ale tutaj jest to dobre rozwiązanie, myślę. Użyłem metod inspekcji, aby dowiedzieć się, gdzie na div wykresu powinna iść linia, a następnie dodać nowy div, aby narysować linię na wykresie SVG. Podobnie można dodać węzeł SVG do elementu SVG w DOM.

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

musiałem zrobić div kontenera position: relative wykonywania obliczeń łatwiejsze.

Kod główny to:

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

Wszystkie wartości zakodowanych mogą być usunięte i zastąpione albo obliczeń lub stałe, w zależności od źródła danych.