Javascript 如何在谷歌图表上绘制直方图的垂直线？

如果我画折线图没有问题，但我想在柱状图上画出来。。（）

用于线条图

var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));

直方图

var chart = new google.visualization.Histogram(document.querySelector('#chart_div'));

其他代码

function drawChart () {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn({type: 'string', role: 'annotation'});
    data.addColumn('number', 'Value');

    data.addRows([
        ['Foo', null, 4],
        ['Bar', null, 3],
        ['Baz', null, 7],
        ['Bat', null, 9],
        ['Cad', 'Vertical line here', 9],
        ['Qud', null, 2],
        ['Piz', null, 6]
    ]);

    var chart = new google.visualization.Histogram(document.querySelector('#chart_div'));
    chart.draw(data, {
        height: 300,
        width: 400,
        annotation: {
            // index here is the index of the DataTable column providing the annotation
            1: {
                style: 'line'
            }
        }
    });
}

---

丹尼尔·拉利伯特回答了我关于谷歌集团的问题，他是谷歌的高级软件工程师

所以这在谷歌图表上是不可能的

但是：）谷歌图表使用SVG。。例如，我想画一条30 x轴的线

var newLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
newLine.setAttribute('id', 'lineId');
newLine.setAttribute('style', 'stroke:rgb(0,0,0); stroke-width:3;');        
newLine.setAttribute('x1', chart.getChartLayoutInterface().getXLocation(30));
newLine.setAttribute('y1', chart.getChartLayoutInterface().getChartAreaBoundingBox().top);
newLine.setAttribute('x2', chart.getChartLayoutInterface().getXLocation(30));
newLine.setAttribute('y2', chart.getChartLayoutInterface().getChartAreaBoundingBox().height + chart.getChartLayoutInterface().getChartAreaBoundingBox().top);
$("svg").append(newLine);

---

对于未来的访问者：这也可以用于在折线图上设置“注释”线的动画-我找不到任何方法让google graph设置注释变化位置的动画，但是设置上面代码中绘制的线的X位置的动画非常简单。感谢您朝着正确的方向努力，dustqm！