I have the following code which generate da combo chart which I have generated using Javascript code:
<script type="text/javascript">
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Days', 'Seat Utilization', 'RevPash'],
['Monday', .61, 34.33],
['Tuesday', .59, 33.15],
['Wednesday', .64, 34.83],
['Thursday', .62, 32.85],
['Friday', .73, 37.30],
['Saturday', .89, 49.76],
['Sunday', .87, 45.99]
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1,
{ //calc: "stringify",
sourceColumn: 1,
type: "number",
role: "annotation" },2]);
var options = {
title : '',
vAxes: {0: {title: "",titleTextStyle: {italic: false},gridlines: { color: 'transparent'}}, 1: {title: "",titleTextStyle: {italic: false},format: 'percent'},gridlines: { color: 'transparent'} },
hAxis: {title: 'Days',titleTextStyle: {italic: false},gridlines: { color: 'transparent'},textStyle : {fontSize: 9 } },
chartArea: {'width': '90%', 'height': '80%'},
seriesType: 'bars',
series: {1: {type: 'area'}},
legend: { position: 'top' },
height: 300,
series: {
1:{ type: "area", targetAxisIndex: 0, color:'#EA922B' },
0:{ type: "bars", targetAxisIndex: 1, color:'#20488D' },
2:{ type: "bars", targetAxisIndex: 1, color:'#94CAFC' },
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_combo'));
chart.draw(view, options);
}
</script>
The chart looks like this:
What shall I do to remove the gridlines?? I have tried the option to make the gridlines transparant, but for some reason it is not working. I am unable to understand that how I can remove the gridlines. Please help
The problem is a typo in the definition for gridlines
on vAxes 1
...
gridlines: {color: 'transparent'}
is defined outside the object curly braces
change from...vAxes: {0: {title: "",titleTextStyle: {italic: false},gridlines: { color: 'transparent'}}, 1: {title: "",titleTextStyle: {italic: false},format: 'percent'},gridlines: { color: 'transparent'} }
to...
vAxes: {0: {title: "",titleTextStyle: {italic: false},gridlines: { color: 'transparent'}}, 1: {title: "",titleTextStyle: {italic: false},format: 'percent',gridlines: { color: 'transparent'}} }
vAxis: { gridlines: {color: 'none'} }
[eidt] 在这个谷歌文档开发者维基链接的小提琴中工作: https : //developers.google.com/chart/interactive/docs/datesandtimes#formatting-axis-gridline-and-tick-labels
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.