[英]Google Visualization - vAxis maxValue property not working
由於一個完全逃脫我的原因，我無法使vAxis的maxValue屬性工作：
var options = { vAxis: { maxValue: .85 } }
vAxis是一個范圍為0到100％的百分比，我想通過將最大值設置為85％來節省一些空間。 我認為這與7個DataSources和4個ChartTypes之間的這個項目切換有關，因為我制作單個圖表時從未遇到過這個問題。
以下代碼段是一個簡化案例，具有可能與問題相關的最小功能。 感謝您的時間和精力。
<!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僅適用於連續軸 ...
谷歌可視化條形圖格式化垂直軸（vAxis）不起作用
[英]google visualization barchart formatting vertical axis (vAxis) not working
google.visualization.LineChart haxis與vaxis重疊
[英]google.visualization.LineChart haxis is overlapping with vaxis
在谷歌可視化組合圖中如何刪除左側填充而不刪除Vaxis標簽
[英]In google visualization combo charts how do I remove the left padding without removing the Vaxis labels
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.