如何在 Google 材料条形图中隐藏轴标签？

Question

我想显示一个带有分组条形和只有一行水平轴标签的堆积条形图。根据我的发现，从 Google Visualization API v44 开始，目前无法使用 visualization.BarChart 显示堆叠的 BarChart 和分组条形，但使用 series 数组的材料 Bar 图表可以做到这一点选项。

例如：

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

找不到隐藏刻度线的方法

但你可以将它们移到顶部

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

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 选项 = { h轴：{ 格式：“无” } }