如何在Google图表上绘制垂直线到直方图? [英] How Draw Vertical Line to Histogram Graph on Google Charts?

问题描述

如果我绘制折线图没有问题，但是我想在直方图上显示..( https://developers.google.com/chart/interactive/docs/gallery/histogram )

If I draw line chart there is no problem but I want to this on histogram graph.. (https://developers.google.com/chart/interactive/docs/gallery/histogram)

对于LineChart；

For LineChart;

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

推荐答案

Daniel LaLiberte在Google Groups上回答了我的问题，Google Groups是Google的高级软件工程师.

Daniel LaLiberte answered my question on Google Groups, who is a Senior Software Engineer at Google..

https://groups.google. com/forum/#！msg/google-visualization-api/7y3LrKETEwY/fR4HoYwBu-EJ

因此在Google图表上是不可能的..

So it is not possible on Google Charts..

但是:) Google Charts使用SVG.我想画线到30 x轴.

But :) Google Charts uses SVG.. For exp. I want to draw line to 30 x axis..

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图表上绘制垂直线到直方图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！