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

很可能，图表的容器在绘制时是隐藏的。
它应该事先可见。

请参阅下面的工作 sn-p，它会产生相同的结果。
图表的容器被隐藏，然后显示在图表的'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>

---

当容器被隐藏时，图表无法正确调整大小或放置图表元素。
确保图表在绘制之前可见将确保正确渲染。

请参阅以下工作 sn-p...

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

Google 的设置有点愚蠢 在版本 45 之前，只要正确设置宽度就没有问题。

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

现在，即使您手动指定图表的高度和宽度，Google 也无法正确计算 - 但它只影响标签，而不影响图表的其余部分。

在标签加载时绘制图表有点痛苦，因为最近的另一项更改使得使用 google.charts.setOnLoadCallback() 变得更加重要 - 否则由于 Google 加载时间，某些图表将无法在某些浏览器中绘制。

手动设置为版本 45 似乎是遗留图表的最佳解决方案，无需重新编写所有代码。