【问题标题】:Display Y-axis in Stacked Column Chart using Google Charts使用 Google Charts 在堆积柱形图中显示 Y 轴
【发布时间】:2018-02-07 03:25:12
【问题描述】:

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

我尝试过下面提到的属性,但没有成功:

 vAxis: {
      baseline: 0,
    }

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

Fiddle

【问题讨论】:

    标签: jquery charts google-visualization stacked-chart yaxis


    【解决方案1】:

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

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

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

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

    请参阅以下工作 sn-p...

    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>

    【讨论】:

    • 感谢回复。将最小值更改为0后确实出现了Y轴。但是更改后红色系列线(水平线)没有接触Y轴。如何解决?
    • 我已经解决了这个问题。我把最小值设为0 ---> [0, null, null, null, null, null, null, null, null, 0.067],