如何强制Google图表vAxes渲染

Question

目前我在一个页面上绘制了两个图，我正在使用谷歌的可视化图表库，由于页面大小问题，vAxes在某些/大部分时间拒绝渲染。

如果我给它足够的空间，它会很好地渲染轴，但如果它稍微偏离，即使有足够的空间放置这些血腥的轴，它们也会拒绝渲染，我不能这样！

我仔细查看了一下，它似乎在工作时渲染了一堆标签，在不工作时不渲染，这让我觉得应该有一些公牛，如果其他"AI"主动选择破坏我的话！FS！

有没有人有过Charts的经验，并设法找到了一种变通方法，无论谷歌"AI"的意愿如何，都可以强制lib渲染vAxes？(说真的，机器人第二定律怎么了？！天哪，SCUM！(

对不起，我有点讨厌自动取款机。

编辑：对不起，为了提供详细信息，这里是呈现图表的js块：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the chart package.
google.charts.load('visualization', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
function drawChart() {

var options = {
hAxis: {showTextEvery: 5},
vAxes: {  
0: {textPosition: 'out',
viewWindowMode:'pretty',
viewWindow: {min:0},                        
gridlines: {color: 'transparent'},
},
1: {  textPosition: 'out',
viewWindow: {min:0},
gridlines: {color: 'transparent'}
},
},
seriesType: 'bars',
series: {0: {targetAxisIndex:0, type: 'line'},
1:{targetAxisIndex:1},
2:{targetAxisIndex:1},
}
};
//Chart render
var data1 = new google.visualization.DataTable(<?=$jsonEventType?>);
var chart1 = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart1.draw(data1, options);

}

div元素：<div id="chart_div1"style="height:100%；">(它在多个其他div中，但这不是重点(

正如你所知，这是一个基本的c-c-c组合图，$jsonEventType我认为并不重要，但它是：

string(661("｛"cols"：[｛"label"："Date"，"type"："string："2018年7月12日"}，｛"v"：419｝，｛2018年8月2日"｝，｛"v"：369｝，｝"v"：0｝，"v"：12｝]｝，"c"：[｛"v"："09/08/2018"｝、"v":357｝、"v":0｝、｝"v"：25｝]}、"c"：[｛

Answer 1

您可以使用chartArea配置代码来确保图表两侧都有足够的空间。

默认情况下，图表将跟随容器的大小
，但它不会完全填满容器。

我喜欢使用chartArea选项，
将图表拉伸到容器的高度和宽度，
>并在边缘为轴和图例等留出空间。

chartArea: {
top: 32,         // leave room on top for legend
left: 60,        // for axis index 0
right: 60,       // for axis index 1
bottom: 32,      // for x-axis
height: '100%',  // stretch height
width: '100%',   // stretch width
},
height: '100%',    // ensure fills height of container
width: '100%',     // fills width of container

请参阅以下工作片段。。。

google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({"cols":[{"label":"Date","type":"string"},{"label":"To Audit","type":"number"},{"label":"Open","type":"number"},{"label":"Closed","type":"number"}],"rows":[{"c":[{"v":"05/07/2018"},{"v":437},{"v":0},{"v":8}]},{"c":[{"v":"12/07/2018"},{"v":419},{"v":0},{"v":21}]},{"c":[{"v":"19/07/2018"},{"v":401},{"v":56},{"v":36}]},{"c":[{"v":"26/07/2018"},{"v":385},{"v":0},{"v":20}]},{"c":[{"v":"02/08/2018"},{"v":369},{"v":0},{"v":12}]},{"c":[{"v":"09/08/2018"},{"v":357},{"v":0},{"v":25}]},{"c":[{"v":"16/08/2018"},{"v":348},{"v":0},{"v":18}]},{"c":[{"v":"23/08/2018"},{"v":336},{"v":0},{"v":14}]},{"c":[{"v":"30/08/2018"},{"v":316},{"v":0},{"v":13}]}]});
var options = {
chartArea: {
top: 32,         // leave room on top for legend
left: 60,        // for axis index 0
right: 60,       // for axis index 1
bottom: 32,      // for x-axis
height: '100%',  // stretch height
width: '100%',   // stretch width
},
height: '100%',    // ensure fills height of container
width: '100%',     // fills width of container
hAxis: {showTextEvery: 5},
vAxes: {
0: {
textPosition: 'out',
viewWindowMode:'pretty',
viewWindow: {min: 0},
gridlines: {color: 'transparent'},
},
1: {
textPosition: 'out',
viewWindow: {min: 0},
gridlines: {color: 'transparent'}
},
},
seriesType: 'bars',
series: {
0: {targetAxisIndex:0, type: 'line'},
1: {targetAxisIndex:1},
2: {targetAxisIndex:1},
}
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div1'));
chart.draw(data, options);
window.addEventListener('resize', function () {
chart.draw(data, options);
});
});

html, body {
height: 100%;
margin: 0px 0px 0px 0px;
overflow: hidden;
padding: 0px 0px 0px 0px;
}
#chart_div1 {
height: 100%;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div1"></div>