Значения Google Chart vAxis не отображаются - PullRequest
Новая
       54

Значения Google Chart vAxis не отображаются

0 голосов
/ 01 марта 2019

Я работаю над различными графиками и показываю несколько графиков на одной странице.Каким-то образом значения 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);

enter image description here

1 Ответ

0 голосов
/ 01 марта 2019

Скорее всего, контейнер графика скрыт при его рисовании.
он должен быть сделан видимым заранее.

см. Следующий рабочий фрагмент, который дает тот же результат.
контейнер диаграммы скрыт, а затем отображается в событии '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>
...