Google Combo Chart在柱形图中添加水平和垂直线

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

可以删除所有硬编码值，并根据您的数据源将其替换为计算值或常量。

Google Combo Chart在柱形图中添加水平和垂直线

Google Combo Chart add horizontal and vertical line in column chart

javascript

charts

google-visualization