Google Chart vAxis 值未顯示

Question

我正在處理各種圖表，並且在單個頁面中顯示多個圖表。 不知何故 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);

Answer 1

最有可能的是，圖表的容器在繪制時是隱藏的。
它應該事先可見。

請參閱以下工作片段，它產生相同的結果。
圖表的容器被隱藏，然后顯示在圖表的'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>

Answer 2

我遇到了同樣的問題 - 以上都沒有幫助。 唯一有效的是將加載參數“當前”參數更改為特定版本“45”

https://github.com/google/google-visualization-issues/issues/2693

Answer 3

添加左邊距以顯示 yAxis。 它對我有用。

圖表區域：{寬度：'100％'，左：100}，

Answer 4

它有點來自谷歌的愚蠢設置 在版本 45 之前，只要您正確設置寬度就沒有問題。

例如：'width':$('.tab-container').width()

現在，即使您手動指定圖表的高度和寬度，Google 也無法正確計算 - 但它只會影響標簽，而不影響圖表的其余部分。

在選項卡加載時繪制圖表有點麻煩，因為最近的另一項更改使使用 google.charts.setOnLoadCallback() 變得更加重要 - 否則由於 Google 加載時間，某些圖表將無法在某些瀏覽器中繪制。

手動設置為版本 45 似乎是遺留圖表的最佳解決方案，而無需重新編寫所有代碼。

Answer 5

我的問題是一些 chartArea 選項覆蓋了軸標簽。 添加left （對於 y 軸）或bottom （對於 x 軸）填充。 這是 y 軸填充的示例：

options = {
    chartArea: {width: "90%", left: "100"},
}
chart.draw(chart_data, options)