Google Chart vAxis值未显示 [英] Google Chart vAxis values are not showing

问题描述

我正在处理各种图形，并且在一个页面中显示多个图形。不知何故，vAxis值未显示在某些图形上，而是显示在一些独立的图形（我们可以说它在不同的部分并手动触发）中。

I am working on various graphs and I am showing multiple graphs in a single page. Somehow vAxis values are not showing on some graphs but it showing in some independent (we can say its in different section and triggered manually) graphs.

我已经尝试了所有的方法

I have tried everything that I could have.

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);

推荐答案

很有可能，图表的容器在绘制时是隐藏的。

应该事先使其可见。

most likely, the chart's container is hidden when it is drawn.
it should be made visible beforehand.

请参见以下工作片段，产生相同的结果。

图表的容器被隐藏，然后显示在图表的 就绪 事件。

因此，缺少 vAxis 标签。

see following working snippet, which produces the same result.
the chart's container is hidden, then shown on the chart's 'ready' event.
as a result, the vAxis labels are missing.

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>

隐藏容器时，图表无法正确显示大小或放置图表元素。

确保在绘制之前可以看到图表，以确保正确呈现。

when the container is hidden, the chart cannot properly size or place chart elements.
ensuring the chart is visible before drawing will ensure proper rendering.

请参阅以下工作摘要...

see following working snippet...

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>

这篇关于Google Chart vAxis值未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！