使用Google Charts在Stacked Column Chart中显示Y轴

Posted 2021-05-05

我正在使用谷歌图表来显示我的堆积图表。我的x轴是数字，y轴也是数字。我得到一条黑线作为x轴。但是缺少y轴。它没有显示。

我试过下面提到的属性，但它不起作用：

 vAxis: {
      baseline: 0,
    }

需要设置什么属性才能显示Y轴。

Fiddle

答案

放置在x轴上的视图窗口隐藏/覆盖基线...

hAxis: {
  viewWindow: {
    min: min,
    max: max
  }
  ...

将min更改为零，允许基线出现......

var min = 0;
var max = data.getColumnRange(0).max;

请参阅以下工作代码段...

google.charts.load('current', {
  packages:['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Machine', '', {
      role: 'style'
    }, '', {
      role: 'style'
    }, '', {
      role: 'style'
    }, '', {
      role: 'style'
    }, ''],
    [0.5, null, null, null, null, null, null, null, null, 0.067],
    [1, 0.05, "#808080", 0.0775, "#C71585", 0.069, "#FFC0CB", 0.05, "Blue", 0.067],
    [2, 0.05, "Yellow", 0.0775, "Pink", 0.069, "#808080", 0.05, "Green", 0.067],
    [2.5, null, null, null, null, null, null, null, null, 0.067]
  ]);

  var min = 0;
  var max = data.getColumnRange(0).max;

  var options = {
    width: 500,
    height: 500,
    legend: {
      position: 'none',
      maxLines: 6,
      textStyle: {
        color: 'black',
        fontSize: 10
      }
    },
    isStacked: true,
    seriesType: 'bars',
    series: {
      4: {
        type: "line",
        color: '#FF0000',
        visibleInLegend: false
      }

    },
    hAxis: {
      ticks: [{
        "v": 1,
        "f": "M1"
      }, {
        "v": 2,
        "f": "M2"
      }],
      viewWindow: {
        min: min,
        max: max
      }
    }
  };

  var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
  chart.draw(data, options);
});

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

以上是关于使用Google Charts在Stacked Column Chart中显示Y轴的主要内容，如果未能解决你的问题，请参考以下文章

Google Charts LogScale无效

Google Charts：在相同的“X”值上绘制多个“Y”值

Stacked IFs Google Sheets Apps 脚本

图表在ng2-google-charts中调整大小

Google Charts interpolateNulls无效

使用 Google Charts 填充 MySQL 数据