Question

有没有办法隐藏Google地理广告中图例中的数字？ https://developers.google.com/chart/interactive/docs/gallery/geochart

我看到一些选项可以设置图例和数字格式，但不能隐藏图例中的数字。当我使用传奇：＆＃39;无＆＃39;时，它隐藏了我不想要的整个传奇。

我尝试在图表加载后运行此jquery但是在将鼠标悬停在地图上时，它会将图例编号带回来。

$("text[text-anchor='start']").hide();

Answer 1

这里有几个选项...

将legend.textStyle.color设置为与背景颜色相同的颜色......

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

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.GeoChart(container);
    chart.draw(data, {
      legend: {
        textStyle: {
          color: '#ffffff'
        }
      }
    });
  },
  packages: ['geochart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

由于标签重新出现在任何互动上，使用MutationObserver知道活动何时发生，
然后删除或隐藏标签......

唯一的障碍是不删除图表中的其他标签，例如工具提示

请参阅以下工作代码段，为图标标注指定了一种独特的颜色，以便于识别...

注意：使用此方法时，图表会将颜色名称更改为十六进制值，并将任何字母更改为小写，请务必以小写十六进制值开头...

google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

    var container = document.getElementById('chart_div');
    var chart = new google.visualization.GeoChart(container);

    var labelColor = '#b71c1c';

    var observer = new MutationObserver(removeLabels);
    observer.observe(container, {
      childList: true,
      subtree: true
    });

    function removeLabels() {
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(legendLabel) {
        if ((legendLabel.getAttribute('text-anchor') === 'start') && ((legendLabel.getAttribute('fill') === labelColor))) {
          legendLabel.parentNode.removeChild(legendLabel);
        }
      });
    }

    chart.draw(data, {
      legend: {
        textStyle: {
          color: labelColor
        }
      }
    });
  },
  packages: ['geochart']
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

隐藏Google地理中的图例编号

1 个答案: