jquery - 使用 Google Charts 在堆积柱形图中显示 Y 轴

Question

我正在使用谷歌图表来显示我的堆积图表。我的x轴是数字，y轴也是数字。我得到一条黑线作为 x 轴。但 y 轴丢失了。不显示。

我尝试了下面提到的属性，但它不起作用:

 vAxis: {
      baseline: 0,
    }

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

Fiddle

Answer 1

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

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

将最小值更改为零，允许出现基线...

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>