Javascript 谷歌图表列隐藏选项

我正在使用谷歌图表显示我的气泡图

我使用了x，y编号来定位气泡，所以当我将光标放在上时，我不想显示xnumber和ynumber列。。我该怎么做

非常感谢

---

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

tooltip
 {
    tigger:'none'
  }

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

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

tooltip
    {
     isHtml:true;
    }

您可以参考此链接了解详细的解决方案

---

如果只想隐藏x和y数字，可以替代样式并使用“显示”属性。 将用于显示x编号和y编号的元素的显示属性设置为

none

将名为myClass的类添加到id被提供给图表进行渲染的div中。 并在css文件中添加以下代码

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

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

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

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

在这种情况下，我们可以使用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'{
软件包：['corechart']
}).然后（函数（）{
var data=new google.visualization.DataTable({
“科尔斯”：[
{“label”：“Port_num”，“type”：“string”}，
{“label”：“xnumber”，“type”：“number”}，
{“label”：“ynumber”，“type”：“number”}，
{“label”：“PortType”，“type”：“string”}，
{“标签”：“计数”，“类型”：“编号”}
],
“行”：[
{“c”：[{“v”：“443”}，{“v”：120}，{“v”：10}，{“v”：“TCP”}，{“v”：15}]}
]
});
变量选项={
标题：“气泡图”，
//图例：{位置：'none'}，
hAxis:{基线：0，最大值：200}，
变量：{基线：0，最大值：100}，
气泡：{textStyle:{fontSize:11}}，
宽度：“100%”，
高度：“400px”，
背景色：“透明”，
工具提示：{isHtml:true，触发器：'tware'}
//颜色轴：{colors:['red'，'#004411']}
};
var chart=new google.visualization.BubbleChart（document.getElementById（'series\u chart\u div'）；
图表绘制（数据、选项）；
});
#系列图表\u div.google可视化工具提示>.google可视化工具提示项列表>.google可视化工具提示项：第n个子项（2），
#系列图表\u div.google可视化工具提示>.google可视化工具提示项列表>.google可视化工具提示项：第n个子项（3）{
显示：无；
可见性：隐藏；
}

谢谢，我使用的是Json字符串，所以我应该把工具提示选项放在哪里？我只想隐藏x y数字。其他的东西应该显示出来。嘿，我也添加了其他的解决方案，这对你的场景很有帮助。我添加了@WhiteHatresult.append（“{”cols\”：[{“label\”：\“Port\u num\”，\“type\”：“string\”，{“label\”：“null\”，“type\”：“number\”，{“label\”：“ynumber\”，“type\”，“type\”，{“label\”：“number\”，“number\”，{“label\”，“type\”，“type\”，“type\：“string\”，“，“，{label\”，“label\”\“，\“type\”：\“number\”}]，”；result.append（“\“rows\”：[”）；我用这个字符串制作JSON格式。@WhiteHat