Google GeoCharts：如何删除自定义 HTML 工具提示中的 header？

Question

我有一个带有自定义 HTML 工具提示的 Google GeoChart。
一切都很好，只是工具提示标题不会消失

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    [ 
        {label: 'Country', type: 'string'},
        {label: 'Popularity', type: 'number'},
      {label: 'Tooltip', 'type': 'string', 'role': 'tooltip', 'p': {'html': true}}
    ],
    ['Germany', 200, makeTooltip('Germany', 200)],
    ['United States', 300, makeTooltip('USA', 300)],
    ['Brazil', 400, makeTooltip('Brazil', 400)],
    ['Canada', 500, makeTooltip('Canada', 500)],
    ['France', 600, makeTooltip('France', 600)],
    ['RU', 700, makeTooltip('Russia', 700)]
  ]);

  var options = {
    legend: 'none',
    tooltip: {isHtml: true}
  };
  
  function makeTooltip(label, value){
    return '<div style="padding:10px;border:1px solid red">'+label+'<hr>'+value+'</div>';
  }

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

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

<div id="regions_div"></div>

与条形图相同的配置完美运行

google.charts.load('current', {
  'packages': ['corechart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    [ 
        {label: 'Country', type: 'string'},
        {label: 'Popularity', type: 'number'},
      {label: 'Tooltip', 'type': 'string', 'role': 'tooltip', 'p': {'html': true}}
    ],
    ['Germany', 200, makeTooltip('Germany', 200)],
    ['United States', 300, makeTooltip('USA', 300)],
    ['Brazil', 400, makeTooltip('Brazil', 400)],
    ['Canada', 500, makeTooltip('Canada', 500)],
    ['France', 600, makeTooltip('France', 600)],
    ['RU', 700, makeTooltip('Russia', 700)]
  ]);

  var options = {
    legend: 'none',
    tooltip: {isHtml: true}
  };
  
  function makeTooltip(label, value){
    return '<div style="padding:10px;border:1px solid red">'+label+'<hr>'+value+'</div>';
  }

  var chart = new google.visualization.ColumnChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

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

<div id="regions_div"></div>

我错过了什么？ answer 我的类似问题建议添加 showTitle: false，但它不起作用...我真的应该处理 CSS 来隐藏标题吗？谢谢

Answer 1

这是 GeoChart 特有的问题。

您可以通过在第一列上使用对象表示法来删除。
提供值和一个空白格式的值。

{v: 'Germany', f: ''}

请参阅以下工作片段...

google.charts.load('current', {
  'packages': ['geochart'],
  'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});

google.charts.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {
  var data = google.visualization.arrayToDataTable([
    [ 
        {label: 'Country', type: 'string'},
        {label: 'Popularity', type: 'number'},
      {label: 'Tooltip', 'type': 'string', 'role': 'tooltip', 'p': {'html': true}}
    ],
    [{v: 'Germany', f: ''}, 200, makeTooltip('Germany', 200)],
    [{v: 'United States', f: ''}, 300, makeTooltip('USA', 300)],
    [{v: 'Brazil', f: ''}, 400, makeTooltip('Brazil', 400)],
    [{v: 'Canada', f: ''}, 500, makeTooltip('Canada', 500)],
    [{v: 'France', f: ''}, 600, makeTooltip('France', 600)],
    [{v: 'RU', f: ''}, 700, makeTooltip('Russia', 700)]
  ]);

  var options = {
    legend: 'none',
    tooltip: {isHtml: true, trigger: 'both'}
  };
  
  function makeTooltip(label, value){
    return '<div style="padding:10px;border:1px solid red">'+label+'<hr>'+value+'</div>';
  }

  var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

  chart.draw(data, options);
}

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

<div id="regions_div"></div>

Google GeoCharts：如何删除自定义 HTML 工具提示中的 header？

Google GeoCharts: how to remove header in custom HTML tooltip?

javascript

charts

tooltip

google-visualization