如何在Google素材条形图中隐藏hAxis标签？

Question

我想显示带有分组条形图的堆叠条形图，并且只显示一行水平轴标签。根据我的发现，目前无法在Google Visualization API v44中使用BarChart显示带有分组栏的堆积visualization.BarChart，但这可以通过材料Bar图表来实现使用series数组选项。

例如：

google.charts.load('44', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Nothing');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Red');

  data.addRows([
    ['Row 1', 14, 1, 3, 0, 1, 36],
    ['Row 2', 10, 1, 0, 2, 2, 23],
  ]);


  var options = {
    legend: {
      position: 'none'
    },
    isStacked: true,
    series: {
      5: {
        targetAxisIndex: 1
      }
    },
    hAxis: {
      viewWindow: {
        min: 0,
        max: 40
      },
      textPosition: 'none',
      ticks: [null],
      title: 'Hide one of the axis values	'
    },
    bars: 'horizontal'
  };

  var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>

我的问题是两个条的水平轴范围/刻度匹配，因此在底部显示2与完全相同的刻度值是多余的。使用非素材BarChart，textPosition: 'none'选项可用于隐藏轴的标签but this option is not currently supported in material bar charts。是否有其他方式可以以非黑客的方式隐藏其中一个轴标签/刻度？

请注意，textPosition无效。

Answer 1

无法找到隐藏刻度线的方法

但你可以将它们移到顶部

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

google.charts.load('44', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Nothing');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Red');

  data.addRows([
    ['Row 1', 14, 1, 3, 0, 1, 36],
    ['Row 2', 10, 1, 0, 2, 2, 23]
  ]);

  var options = {
    legend: {
      position: 'none'
    },
    isStacked: true,
    series: {
      5: {
        axis: 'red'
      }
    },
    axes: {
      x: {
        red: {
          label: '',
          side: 'top'
        }
      }
    },
    hAxis: {
      viewWindow: {
        min: 0,
        max: 40
      },
      title: 'Hide one of the axis values'
    },
    bars: 'horizontal'
  };

  var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>

更新

另一种选择是手动修改图表的svg，
一旦'ready'事件触发

这里，绘制图表时隐藏了顶部标签......

google.charts.load('44', {
  callback: drawChart,
  packages: ['bar']
});

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Nothing');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Blue');
  data.addColumn('number', 'Red');

  data.addRows([
    ['Row 1', 14, 1, 3, 0, 1, 36],
    ['Row 2', 10, 1, 0, 2, 2, 23]
  ]);

  var options = {
    legend: {
      position: 'none'
    },
    isStacked: true,
    series: {
      5: {
        axis: 'red'
      }
    },
    axes: {
      x: {
        red: {
          label: '',
          side: 'top'
        }
      }
    },
    hAxis: {
      viewWindow: {
        min: 0,
        max: 40
      },
      title: 'Hide one of the axis values'
    },
    bars: 'horizontal'
  };

  var chart = new google.charts.Bar(document.getElementById('stacked-grouped-chart'));
  google.visualization.events.addListener(chart, 'ready', function () {
    $.each($('#stacked-grouped-chart text'), function (index, label) {
      if (parseFloat($(label).attr('y')) < 20) {
        $(label).attr('fill', 'none');
      }
    });
  });
  chart.draw(data, google.charts.Bar.convertOptions(options));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="stacked-grouped-chart"></div>

Answer 2

var 选项 = { 轴：{ 格式：'无' } }