时间戳

首页 > 解决方案 > 谷歌散点图不显示 Y 轴标签

charts - 谷歌散点图不显示 Y 轴标签

问题描述

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

我尝试了各种方法，这些都是在这里和其他论坛上提出的。包括：调整图表大小、调整标签字体大小、调整轴和改变vAxis的textPosition。这些都不起作用。

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

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

标签： chartsgoogle-visualizationlabelaxis

解决方案

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

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>

推荐阅读