Google 图表列隐藏选项

Question

我正在使用 Google 图表来显示我的气泡图。

我使用 x, y 数字来定位气泡，所以我不想在将光标放在上面时显示 x 数字和 y 数字列。我该怎么做？

非常感谢。

enter image description here

var options = {
title: 'bubble graph',
      //legend:{position:'none'},
      hAxis: { baseline:0, maxValue:200},
      vAxis: { baseline:0, maxValue:100},
      bubble: {textStyle: {fontSize: 11}},
      width : '100%',
      height : '400px',
      backgroundColor: "transparent",
      tooltip: {trigger:'selection'}
      //colorAxis:{colors:['red','#004411']}
    };    
    var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));

    chart.draw(data, options);

Answer 1

您可以在用于自定义图表的选项数组中使用属性 tooltip.trigger 并设置

tooltip
 {
    tigger:'none'
  }

将光标放在上面时不会显示您的 x 和 y 数字。

如果您想使用自己的设计来显示工具提示，您可以使用

的选项

tooltip
    {
     isHtml:true;
    }

详细解决方法可以参考这个link Customizing your tooltip

Answer 2

因为您只想隐藏 x 和 y 数字，您可以覆盖样式并使用显示属性。将用于显示 x 数和 y 数的元素的显示属性设置为 none。

将名为myClass的class添加到div，其id被赋予图表进行渲染。并在您的 css 文件中添加以下代码。

/deep/ .myClass {
          div {
           g.google-visualization-tooltip {
            g:first-of-type() {
           display: none !important
          }
      }
     }

这不会显示工具提示的第一行。同样，您也可以根据需要隐藏其他元素。

Answer 3

data format 的 BubbleChart 不允许自定义工具提示。

在这种情况下，我们可以修改标准工具提示，使用CSS。

首先，添加以下工具提示选项，以允许 html 工具提示...

isHtml: true

接下来，将以下内容 CSS 添加到您的页面。这将从工具提示中隐藏第二个和第三个项目。

#series_chart_div .google-visualization-tooltip > .google-visualization-tooltip-item-list > .google-visualization-tooltip-item:nth-child(2),
#series_chart_div .google-visualization-tooltip > .google-visualization-tooltip-item-list > .google-visualization-tooltip-item:nth-child(3) {
  display: none;
  visibility: hidden;
}

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = new google.visualization.DataTable({
    "cols":[
      {"label":"Port_num", "type":"string"},
      {"label":"xnumber", "type":"number"},
      {"label":"ynumber", "type":"number"},
      {"label":"PortType","type":"string"},
      {"label":"count", "type":"number"}
    ],
    "rows":[
      {"c":[{"v":"443"},{"v":120},{"v":10},{"v":"TCP"},{"v":15}]}
    ]
  });

  var options = {
    title: 'bubble graph',
    //legend:{position:'none'},
    hAxis: { baseline:0, maxValue:200},
    vAxis: { baseline:0, maxValue:100},
    bubble: {textStyle: {fontSize: 11}},
    width : '100%',
    height : '400px',
    backgroundColor: 'transparent',
    tooltip: {isHtml: true, trigger: 'both'}
    //colorAxis:{colors:['red','#004411']}
  };

  var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
  chart.draw(data, options);
});

#series_chart_div .google-visualization-tooltip > .google-visualization-tooltip-item-list > .google-visualization-tooltip-item:nth-child(2),
#series_chart_div .google-visualization-tooltip > .google-visualization-tooltip-item-list > .google-visualization-tooltip-item:nth-child(3) {
  display: none;
  visibility: hidden;
}

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

Google 图表列隐藏选项

Google Chart Column hide option

javascript

charts

jsp

google-visualization