Google Chart Column hide option

问题

I am using Google Chart to show my bubble chart.

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?

Thanks a lot.

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

回答1:

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

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

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

isHtml: true

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>

回答2:

you can use the attribute tooltip.trigger in the options array which is used to customize your chart and set the

tooltip
 {
    tigger:'none'
  }

This would not show up your x and y numbers on putting the cursor on it.

And if you want to use your own design for showing up the tooltip you can use the option of

tooltip
    {
     isHtml:true;
    }

You can refer to this link for detailed solution Customizing your tooltip

回答3:

As you want to hide only the x and y number you can override the style and use display property. Set the display property to none for the element which is used to show the x number and y number.

Add the class named myClass to the div whose id is given to the chart for rendering. And add the following code in your css file.

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

This would not display your first row of the tooltip. Similarly you can hide other elements too whichever you want.

来源：https://stackoverflow.com/questions/62263622/google-chart-column-hide-option

标签

javascript

jsp

charts

google-visualization