Google Scatter Chart не отображает метки оси Y

Question

Я хочу отобразить некоторые данные с помощью Google Scatter Chart. Как бы я ни старался, я не могу отобразить метки оси y.

Я пробовал разные вещи, которые предлагались здесь и на других форумах. В том числе: изменение размера диаграммы, изменение размера шрифта надписи, изменение масштаба оси и изменение положения текста оси vAxis. Ничего из этого не сработало.

Самое смешное, что определенные мной галочки показывают правильно расположенные линии сетки. Это просто ярлыки, которые отсутствуют. Также отображается название оси, что приводит меня к выводу, что расстояние не является проблемой. Код выглядит так:

function  getLineChartOptions(target,leaflayer,curretnStartDate,currentEndDate) {

    var ymin = 0;
    var ymax = 100;
    var yticks = [];
    if (target == "BBCH (BBCH)"){
        yAxisTitle = "BBCH";
        yticks = [0, 20, 40, 60, 80, 100];
    }
    else{
        yAxisTitle = target +" "+leaflayer+" severity";
        yticks = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    }
    var mo={
        title: yAxisTitle,
        width: 800,
        height: 400,
        vAxis: {
            viewWindow: {
                    min: ymin,
                    max: ymax
                },
            ticks: yticks,
            title: yAxisTitle,
            labels: yticks,
            textStyle : { fontSize: 10} 
        },
        hAxis: {
            viewWindow: {
                    min: curretnStartDate,
                    max: currentEndDate
                },
            gridlines: {
                count: 6,
            }
        },
        tooltip: {isHtml: true, trigger: 'selection'},
        legend: {position: 'none'},
        colorAxis: {colors: ['green','yellow', 'red']},
        focusTarget: 'category'
    };
    return mo

var materialOptions = getLineChartOptions(target,leaflayer,curretnStartPickedDate,enddatePickedDate);
var node        = document.createElement('div');
var infoWindow  = new google.maps.InfoWindow();
var chart       = new google.visualization.ScatterChart(node);
            chart.draw(Data, materialOptions);

Answer 1

Элемент контейнера диаграммы необходимо добавить в документ перед рисованием диаграммы.
В противном случае диаграмма не может правильно рассчитать размеры и размещение.

var node = document.createElement('div');  // <-- new element, not added to the document yet
var chart = new google.visualization.ScatterChart(node);
chart.draw(data, options);

см. Следующий рабочий фрагмент,
аналогичным образом, диаграмма рисуется во вновь созданном элементе
, который позже добавляется в документ.
обратите внимание, как y-метки оси отсутствуют, а метки оси x частично перекрываются.

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var oneDay = (24 * 60 * 60 * 1000);
  var currentEndDate = new Date();
  var currentStartDate = new Date(currentEndDate.getTime() - (oneDay * 365.25));
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Y');
  for (var i = currentStartDate.getTime(); i <= currentEndDate.getTime(); i = i + oneDay) {
    var direction = (i % 2 === 0) ? 1 : -1;
    var rowDate = new Date(i);
    data.addRow([rowDate, rowDate.getMonth() + (rowDate.getDate() * direction)]);
  }

  var options = {
    title: 'test chart',
    width: 800,
    height: 400,
    vAxis: {
      viewWindow: {
        min: 0,
        max: 100
      },
      ticks: [0, 20, 40, 60, 80, 100],
      title: 'test y-axis',
      textStyle : {fontSize: 10}
    },
    hAxis: {
      viewWindow: {
        min: currentStartDate,
        max: currentEndDate
      },
      gridlines: {
        count: 6,
      }
    },
    tooltip: {isHtml: true, trigger: 'selection'},
    legend: {position: 'none'},
    focusTarget: 'category'
  };

  var container = document.getElementById('chart');
  var node = document.createElement('div');
  var chart = new google.visualization.ScatterChart(node);
  chart.draw(data, options);

  container.appendChild(node);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

---

, если мы сначала добавим элемент контейнера в документ,
, тогда диаграмма будет нарисована правильно.

var container = document.getElementById('chart');
var node = container.appendChild(document.createElement('div'));
var chart = new google.visualization.ScatterChart(node);
chart.draw(data, options);

см. Следующий рабочий фрагмент ...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var oneDay = (24 * 60 * 60 * 1000);
  var currentEndDate = new Date();
  var currentStartDate = new Date(currentEndDate.getTime() - (oneDay * 365.25));
  var data = new google.visualization.DataTable();
  data.addColumn('date', 'Date');
  data.addColumn('number', 'Y');
  for (var i = currentStartDate.getTime(); i <= currentEndDate.getTime(); i = i + oneDay) {
    var direction = (i % 2 === 0) ? 1 : -1;
    var rowDate = new Date(i);
    data.addRow([rowDate, rowDate.getMonth() + (rowDate.getDate() * direction)]);
  }

  var options = {
    title: 'test chart',
    width: 800,
    height: 400,
    vAxis: {
      viewWindow: {
        min: 0,
        max: 100
      },
      ticks: [0, 20, 40, 60, 80, 100],
      title: 'test y-axis',
      textStyle : {fontSize: 10}
    },
    hAxis: {
      viewWindow: {
        min: currentStartDate,
        max: currentEndDate
      },
      gridlines: {
        count: 6,
      }
    },
    tooltip: {isHtml: true, trigger: 'selection'},
    legend: {position: 'none'},
    focusTarget: 'category'
  };

  var container = document.getElementById('chart');
  var node = container.appendChild(document.createElement('div'));
  var chart = new google.visualization.ScatterChart(node);
  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>