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 加载时间，某些图表将无法在某些浏览器中绘制。< /p>

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

Google Chart vAxis值未显示

4 个答案: