[英]How Draw Vertical Line to Histogram Graph on Google Charts?
如果我繪制折線圖沒有問題,但是我想要在直方圖上顯示。.( 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'
}
}
});
}
Daniel LaLiberte在Google Groups上回答了我的問題,Google Groups是Google的高級軟件工程師。
https://groups.google.com/forum/#!msg/google-visualization-api/7y3LrKETEwY/fR4HoYwBu-EJ
因此,在Google圖表上是不可能的。
但是:) Google Charts使用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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.