Google Combo Chart добавляет горизонтальную и вертикальную линию в столбчатой ​​диаграмме

Question

Как создать Google Combo Chart, который воспроизводит изображение ниже? Кажется, что когда я добавляю столбец для вертикальной линии, зеленые столбцы теряют свойство groupWidth и превращаются в тощие линии.

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

Вот jsfiddle: http://jsfiddle.net/vmb4odkt/

Answer 1

Все это можно использовать некоторые очистки, особенно в зависимости от окончательных данных, но вот хорошее решение, я думаю. Я использовал методы проверки, чтобы узнать, где на div диаграммы должна идти строка, а затем добавить новый div, чтобы нарисовать линию по диаграмме SVG. Аналогичным образом вы можете добавить узел SVG в элемент SVG в DOM.

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

я должен был сделать контейнер DIV position: relative, чтобы сделать расчеты проще.

Основной код заключается в следующем:

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

Все закодированных значений может быть удален и заменен либо расчетами или константами в зависимости от источника данных.