Google散点图不显示Y轴标签 [英] Google Scatter Chart does not display Y axis labels

问题描述

我想用Google散点图显示一些数据.无论如何尝试，我都无法显示y轴标签.

I want to display some Data with googles Scatter Chart. No matter how I try I can't get the y axis labels to show.

我尝试了各种方法，这些方法在这里和其他论坛上都有建议.包括:调整图表大小，调整标签字体大小，调整轴比例并更改vAxis的textPosition. 这些都不起作用.

I tried various things, which were suggested here and on other forums. Including: Resizing the chart, resizing the label font, Rescaling the axis and changing the textPosition of the vAxis. None of this worked.

有趣的是，我定义的刻度线显示了正确放置的网格线.只是缺少标签.还显示了轴标题，这使我得出结论，间距不是问题.代码如下:

The funny thing is that the ticks I defined are showing correctly placed gridlines. It is just the labels that are missing. The axis title is also displayed which leads me to the conclusion that spacing is not an issue. The code looks like this:

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

推荐答案

在绘制图表之前，需要将图表的容器元素添加到文档中.
否则，图表将无法正确计算尺寸和位置.

the chart's container element needs to be added to the document before drawing the chart.
otherwise, the chart cannot properly calculate sizing and placement.

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轴标签部分重叠.

see following working snippet,
in similar fashion, the chart is drawn in a newly created element,
which is later added to the document.
notice how the y-axis labels are missing, and the x-axis labels partially overlap.

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>

如果我们首先将容器元素添加到文档中，
然后正确绘制图表.

if we first add the container element to the document,
then the chart is drawn properly.

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

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

see following working snippet...

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>

这篇关于Google散点图不显示Y轴标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！