Google 차트에서 세로선과 막대 그래프를 그리는 방법은 무엇입니까?

Question

꺾은 선형 차트를 그릴 경우 아무런 문제가 없지만 히스토그램 그래프에서이를 원합니다. (https://developers.google.com/chart/interactive/docs/gallery/histogram)

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

Answer 1

다니엘 라리 베르테는 .. 그래서 구글 차트에 수 없습니다 구글의 수석 소프트웨어 엔지니어로 Google 그룹스, 내 질문 ..

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

대답

그러나 :) Google Charts는 SVG를 사용합니다 .. exp. 나는 미래의 방문객 .. (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);