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

Question

我正在尝试向 Google 条形图添加自定义工具提示，但我不知道如何执行此操作。 Google 提供了一个很好的教程（位于 https://developers.google.com/chart/interactive/docs/customizing_tooltip_content），但它只讨论柱形图，而不是条形图。

这是我的代码的样子：

<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

向 DataTable 对象添加一个新列，其角色为

tooltip

:

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

然后循环

data

并为每一行添加您想要的任何工具提示（例如下面的一列条形图小提琴）：

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

演示 -> http://jsfiddle.net/pc3zmb8w/

我无法更准确地指导您，因为我们不知道您的 PHP

$data

是什么或您的图表是什么样子。但是，在所有情况下，当您想要动态向图表添加自定义工具提示时，这基本上是您应该这样做的方式......

---

更新 - 设置工具提示样式

至于“有没有办法让工具提示显示为矩形，而不是语音简介”，在选项中 - 将

tooltip

设置为

isHtml

:

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

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

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

例如，使用普通工具提示的颜色显示工具提示，但使用更大的字体大小和特定字体：

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

按照原始答案设置工具提示：

data.setValue(i, 2, '<div class="tooltip">Tooltip #'+i+'</div>');

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['x', 'Cats'],
    ['A', 1],
    ['B', 2],
    ['C', 4],
    ['D', 8],
    ['E', 7],
    ['F', 7],
    ['G', 8],
    ['H', 4]
  ]);

  data.addColumn({
    type: 'string',
    role: 'tooltip',
    p: {
      'html': true
    }
  });
  for (var i = 0; i < data.getNumberOfRows(); i++) {
    data.setValue(i, 2, '<div class="tooltip">Tooltip #' + i + '</div>');
  }

  var options = {
    title: 'Test chart',
    tooltip: {
      isHtml: true
    }
  };

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

}

google.load("visualization", "1", {
  packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);

#chart {
  width: 500px;
  height: 500px;
}

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

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>