我正在处理各种图表,并且在单个页面中显示多个图表。 vAxis 值以某种方式未显示在某些图表上,但它显示在一些独立的(我们可以说它在不同的部分并手动触发)图表中。
我已经尽力了。
var data = google.visualization.arrayToDataTable(window.item);
let options = {
width: 1410,
height: 400,
legend: {position: 'right'},
bar: {groupWidth: '75%'},
isStacked: true,
vAxis: {
minValue: 0,
title: 'Count',
textStyle: {fontSize: 7}
}
};
chart.draw(data, options);
最佳答案
最有可能的是,图表的容器在绘制时是隐藏的。
它应该事先可见。
请参阅以下工作代码段,它会产生相同的结果。
图表的容器被隐藏,然后显示在图表的 'ready'
事件中。
结果,vAxis
标签丢失了。
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
cols: [
{label: 'x', type: 'string'},
{label: 'y0', type: 'number'},
{label: 'y1', type: 'number'},
{label: 'y2', type: 'number'},
{label: 'y3', type: 'number'},
],
rows: [
{c:[{v: 'Column 1'}, {v: 9145.6}, {v: 1000.4}, {v: 0}, {v: 900.4}]},
{c:[{v: 'Column 2'}, {v: 8123.1}, {v: 0}, {v: 0}, {v: 0}]},
{c:[{v: 'Column 3'}, {v: 7030.7}, {v: 200.3}, {v: 999.75}, {v: 0}]}
]
});
var options = {
width: 1410,
height: 400,
legend: {position: 'right'},
bar: {groupWidth: '75%'},
isStacked: 'true',
vAxis: {
minValue: 0,
title: 'Count',
textStyle: {fontSize: 7}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
container.className = '';
});
chart.draw(data, options);
});
.hidden {
display: none;
visibility: hidden;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>
当容器隐藏时,图表无法正确调整大小或放置图表元素。
确保图表在绘制之前可见将确保正确呈现。
请参阅以下工作片段...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable({
cols: [
{label: 'x', type: 'string'},
{label: 'y0', type: 'number'},
{label: 'y1', type: 'number'},
{label: 'y2', type: 'number'},
{label: 'y3', type: 'number'},
],
rows: [
{c:[{v: 'Column 1'}, {v: 9145.6}, {v: 1000.4}, {v: 0}, {v: 900.4}]},
{c:[{v: 'Column 2'}, {v: 8123.1}, {v: 0}, {v: 0}, {v: 0}]},
{c:[{v: 'Column 3'}, {v: 7030.7}, {v: 200.3}, {v: 999.75}, {v: 0}]}
]
});
var options = {
width: 1410,
height: 400,
legend: {position: 'right'},
bar: {groupWidth: '75%'},
isStacked: 'true',
vAxis: {
minValue: 0,
title: 'Count',
textStyle: {fontSize: 7}
}
};
var container = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(container);
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="hidden" id="chart_div"></div>
关于javascript - Google Chart vAxis 值未显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54938935/