由于完全无法理解的原因，我无法使maxValue的vAxis属性正常工作:
vAxis是一个百分比，范围为0到100％，我想通过将最大值设置为85％来节省一些空间。我认为这与该项目在7 DataSources和4 ChartTypes之间切换有关，因为在制作单个图表时我从未遇到过此问题。
以下代码段是精简版案例，具有与问题相关的最少功能。感谢您的时间和精力。
SNIPPET
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
<title>G04B32</title>
<link href='https://glpro.s3.amazonaws.com/_css/glb.css' rel='stylesheet'>
<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
*,
*:before,
*:after {
font-style: normal !important;
}
body {
position: relative;
}
form {
background-image: url(https://glpro.s3.amazonaws.com/ag/04/data/bgl720x404.png);
background-color: #333;
}
#ii {
margin-top: 80px
}
.panel {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#chart {
height: 70vh; width: 96vw; background-image: url(https://glpro.s3.amazonaws.com/ag/04/data/bgl720x404.png); background-size: cover; background-repeat: no-repeat; }
.group.group: after, .chart.chart: after, .root.root: after {
color: #333;
}
div.google-visualization-tooltip {
background-color: rgba(0, 0, 0, .6);
border-radius: 6px;
min-width: 325px;
max-height: 75px;
}
div.google-visualization-tooltip > ul > li {
display: table-cell;
margin: 0 5px;
}
div.google-visualization-tooltip > ul > li > span {
color: gold;
}
#groupOpt.off {
display: none;
}
#groupOpt.on {
display: block;
}
</style>
</head>
<body class='sl'>
<!--THIS SECTION WAS REMOVED-->
<section id="ii">
<h1>Sources</h1>
<figure id='chart'></figure>
</section>
<footer></footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
packages: ['corechart']
});
google.charts.setOnLoadCallback(drawChart);
var options = {
backgroundColor: {
fill: 'transparent'
},
tooltip: {
textStyle: {
color: 'gold',
fontSize: 16,
fontName: 'Verdana'
},
trigger: 'focus',
isHtml: true
},
animation: {
startup: true,
duration: 1000,
easing: 'out'
},
title: 'Percentage of Americans in Favor of Same-sex Marriage (2001-16)',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
hAxis: {
textStyle: {
color: 'cyan'
},
title: 'Year',
titleTextStyle: {
color: 'gold',
fontName: 'Open Sans',
fontSize: 22
},
format: '####',
slantedText: true
},
vAxis: {
maxValue: .85,// <<<<<<<<<<<<<<<<<<<<<DOESN'T WORK>>>>>>
format: '#%',
textStyle: {
fontName: 'Open Sans',
color: 'cyan'
},
title: 'Percentage of Sub-Population that Approves of Same-sex Marriage',
titleTextStyle: {
color: 'gold',
fontName: 'Arial',
fontSize: 16
}
},
legend: {
textStyle: {
color: 'white',
fontName: 'Verdana'
},
position: 'bottom'
},
crosshair: {
trigger: 'both',
orientation: 'both',
focused: {
color: 'gold',
opacity: .7
},
selected: {
color: 'cyan',
opacity: .7
}
},
pointSize: 12,
theme: 'materials',
chartArea: {
left: 100,
top: 75,
width: '90%',
height: '60%'
}
}
var chart;
var main;
var cArray = ['LineChart', 'AreaChart', 'ColumnChart', 'ScatterChart'];
var qArray = [DATA REMOVED];
function drawChart() {
chart = new google.visualization.ChartWrapper();
chart.setDataSourceUrl(qArray[0]);
chart.setChartType(cArray[0]);
chart.setContainerId('chart');
chart.setOptions(options);
chart.draw();
}
function alterChart(C, Q) {
C = Number(C);
Q = Number(Q);
var URL = qArray[Q];
var VIS = cArray[C];
main = new google.visualization.ChartWrapper();
main.setDataSourceUrl(URL);
main.setChartType(VIS);
main.setContainerId('chart');
main.setOptions(options);
main.draw();
}
$('#chartOpt, #groupOpt, #rootOpt').on('change', function(e) {
var chartSel = $("input[name='chart']:checked").val();
var groupSel = $("input.chx:checked").val();
if (e.target !== e.currentTarget) {
var target = e.target.id;
var status = $("input[name='root']:checked").attr('id');
}
if (target === 'root0' && status === 'root0') {
$('#groupOpt').slideUp().removeClass('on').addClass('off');
return alterChart(chartSel, groupSel);
}
if (target === 'root1' && status === 'root1') {
$('#groupOpt').slideDown().addClass('on').removeClass('off');
return alterChart(chartSel, groupSel);
}
<!--THIS PART REMOVED-->
}
</script>
<!--<script src='gvis-api.js'></script>-->
</body>
</html>最佳答案
您可以使用-> vAxis.viewWindow.max覆盖
vAxis: {
viewWindow: {
max: 0.85
}
...
另外，
vAxis.maxValue仅在continuous axis上可用...