Google組合圖表在柱形圖中添加水平和垂直線條

Question

如何創建複製下面圖像的Google組合圖表？看來，一旦我添加垂直線列，綠色列失去其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); 

所有硬編碼值的可被移除，並用計算或根據數據源上的常量取代。