【发布时间】：2018-03-14 22:24:48
【问题描述】：
我对谷歌图表库有点新。我正在尝试使用全长网格线或注释线来拉伸选定 h 轴点的图表的整个高度。
我已经能够在我想要的位置成功地添加一条注释线，但它是一条非常小的线，只占图表全高的一小部分。看例子，人们已经能够通过在 data.addRow 中指定最大值来实现全长注释行，例如：
data.addColumn('string', 'x');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addColumn('number', 'Cats');
data.addColumn('number', 'Blanket 1');
data.addColumn('number', 'Blanket 2');`
并设置行（8是图表高度的最大值）
data.addRow(["G", 'Foo', 'Foo annotation', 8, 1, 0.5]);
但是，我使用 jQuery .each 和点数组动态添加行，所以我不知道图表的最大高度是多少。在我网站的不同实例中，最大高度也会有很大差异，因此我无法将最大值设置为特定数字。
这是我希望我的图表看起来的样子：
这是我的图表代码：
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
function drawChartSponsorship(task_plots, annotation_array) {
console.log("draw sponsorships function");
var objectives = JSON.parse(task_plots);
var annotation_array = JSON.parse(annotation_array);
console.log(annotation_array);
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn ('number','Reach');
data.addColumn({type: 'string', role: 'annotation'});
data.addColumn({type: 'string', role: 'annotationText'});
data.addColumn({type: 'string', role: 'tooltip' })
var tick_points= [];
$.each (objectives, function(key,value){
$.each (value, function(key,valp){
//var time = String()
var objective_array_date = key;
var annotation_value = 0;
var annotation_check = checkAnnotation( annotation_array, objective_array_date );
console.log("here is your variable declaration of annotation_check " + "key: " + objective_array_date + "and response" + annotation_check);
//console.log (annotation_value);
if ( annotation_check == 'not_available' ){
data.addRow([String(objective_array_date), valp, null]);
console.log ("annotation_value was not available");
}else {
data.addRow([String(objective_array_date), valp, "Upload", "Upload", annotation_check]);
tick_points.push(String(objective_array_date));
}
//data.addRow('number', value);
});
});
//var other_max= data.getColumnRange(1).max);
//console.log(other_max);
//var max_value= data.getOption('vAxis.viewWindow.min');
//console.log(max_value);
var header = 'Subscriber Growth';
var Title = ('Subscriber Growth');
//console.log(Testarray);
//var data = google.visualization.arrayToDataTable(Testarray, false);
var options = {
title: header,
titleTextStyle: {
color: '#FFF',
fontSize: '18',
bold:true
},
annotations: {
style: 'line'
},
curveType: 'function',
backgroundColor: '#404040',
hAxis: {
maxTextLines: 1,
minTextSpacing: 40,
//format: 'short',
type: 'string',
ticks: tick_points,
textStyle:{color: '#FFF',
fontSize: '12',
bold: true
},
maxAlternation: 1,
slantedText:false,
},
vAxis:{
textStyle:{color: '#FFF',
fontSize: '15'
},
gridlines: {count: 4},
format: 'short'
},
colors: ['#00cc99'],
height: '350',
width: '550',
chartArea: {'width': '70%','height': '60%', 'right' : 10, 'left': 55, 'bottom': 40 },
legend: { position: 'bottom',
textStyle: {color: '#FFF'}
},
series: {
0: { color: '#00cc99' },
1: { color: '#007AFF' }
}
};
var chart = new google.visualization.LineChart(document.getElementById('sponsorship_top_row_chart'));
chart.draw(data, options);
}
</script> 【问题讨论】：
标签： javascript html charts google-visualization