使用 Google 图表在堆积柱形图中显示 Y 轴

Question

我正在使用 google 图表显示堆叠的 chart.My x 轴是数字，y 轴也是数字。我得到一条黑线，因为 x-axis.But 缺少 y 轴。它不显示。

我试过下面提到的属性，但没有成功：

 vAxis: {
      baseline: 0,
    }

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

Fiddle

Answer 1

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

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>

使用 Google 图表在堆积柱形图中显示 Y 轴

Display Y-axis in Stacked Column Chart using Google Charts

jquery

charts

google-visualization

stacked-chart

yaxis