Google图表列隐藏选项 [英] Google Chart Column hide option

问题描述

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

I am using Google Chart to show my bubble chart.

我使用x，y数字定位气泡，所以当我将光标置于上方时，我不想显示xnumber和ynumber列.我该怎么做?

I used x, y number to locate the bubble, So I don't want to show the xnumber and ynumber column when i put cursor on.. How can I do that?

非常感谢.

在此处输入图片描述

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);

推荐答案

the data format for a BubbleChart does not allow for a custom tooltip.

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

in this case, we can modify the standard tooltip, using CSS.

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

first, add the following tooltip option, to allow html tooltips...

isHtml: true

接下来，将以下CSS添加到您的页面.这将隐藏第二个&工具提示中的第三项.

next, add the following CSS to your page. this will hide the second & third items from the tooltip.

#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;
}

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

see following working snippet...

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图表列隐藏选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！