首页 文章

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

提问于
浏览 次
1

我想显示一个带有分组条形图的堆叠条形图，并且只显示一行水平轴标签 . 根据我的发现，目前无法在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 无效 .

javascript google-visualization

1 回答

  • 2

    找不到隐藏刻度线的方法

    但你可以将它们移到顶部

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

    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>

    UPDATE

    另一种选择是手动修改图表的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>
    回复于

相关问题