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

Как создать 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/

enter image description here

Ответы

Ответ 1

Все это может использовать некоторую очистку, особенно в зависимости от ваших окончательных данных, но здесь хорошее решение, я думаю. Я использовал методы проверки, чтобы узнать, где на диаграмме div должна идти строка, а затем добавить новый div для рисования линии над диаграммой SVG. Аналогично можно добавить SVG node к элементу 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);

Все жестко заданные значения могут быть удалены и заменены либо вычислениями, либо константами в зависимости от вашего источника данных.