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节点添加到DOM中的SVG元素。

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

可以删除所有硬编码值，并使用计算或常量替换，具体取决于您的数据源。