Question

我试图将自定义工具提示添加到Google条形图中，但我无法弄清楚如何执行此操作。谷歌提供了一个很好的教程（https://developers.google.com/chart/interactive/docs/customizing_tooltip_content），但它只讨论了ColumnCharts，而不是Bar Charts。

这是我的代码：

<div id="top_x_div" style="width: 900px; height: 500px;"></div>

google.load("visualization", "1.1",{packages:["bar"]});
google.setOnLoadCallback(drawStuff0);

function drawStuff0() {
   var data = new google.visualization.arrayToDataTable([$data]);
   var options = {
       title: 'Categories',
       width: 900,
       legend: { position: 'none' },
       chart: { title: 'popularity by number of queries',
                subtitle: 'Number of times a category was queried' },
       bars: 'horizontal', // Required for Material Bar Charts.
       axes: {
                x: {
                    0: { side: 'top', label: 'Number of times a category was queried'} // Top x-axis.
                }
             },
       bar: { groupWidth: "90%" }
   };

   var chart = new google.charts.Bar(document.getElementById('top_x_div0'));

   // Convert the Classic options to Material options.
   chart.draw(data, google.charts.Bar.convertOptions(options));
};

$data只是一个包含图表行的PHP变量。

有人可以解释如何在此图表中添加自定义工具提示吗？我已经在网上寻找解决方案了，我还没能找到一个......

Answer 1

使用角色tooltip：

向DataTable对象添加新列

data.addColumn({type: 'string', role: 'tooltip'});

然后遍历data并为每一行添加您想要的任何工具提示（例如，从下面的一个列条形图中提示）：

for (var i=0; i<data.getNumberOfRows(); i++) {
   data.setValue(i, 2, 'Tooltip #'+i);
}

演示 - ＆gt;的 http://jsfiddle.net/pc3zmb8w/

我无法更准确地指导您，因为我们不知道您的PHP $data是什么或您的图表如何。但是，在所有情况下，当您想要动态地向图表添加自定义工具提示时，基本上应该如何操作...

更新 - 为工具提示设置样式

至于“是否有办法让工具提示显示为矩形，而不是语音模糊”，在选项中 - 将tooltip设为{{1} }：

isHtml

然后工具提示显示为像普通HTML元素工具提示一样的矩形。您还可以指定要在工具提示本身中使用HTML：

var options = { tooltip: {isHtml: true} }

例如，使用正常工具提示的颜色显示工具提示，但使用更大的字体大小和某种字体：

data.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});

将工具提示设置为原始答案：

div.tooltip { background-color: #ffffca; color: #000023; padding: 10px; font-size: 20px; font-family : 'arial'; }

演示 - ＆gt;的 http://jsfiddle.net/yhhhcj2f/

将工具提示添加到谷歌可视化条形图

1 个答案: