自定义气泡图's工具提示从谷歌图表API


Customize Bubble chart's tooltip from Google Charts API

我正在尝试从Google API更改气泡图中的气泡的工具提示。

role:tooltip可以解决我的问题,但它不适用于这种图表。

现在,我的气泡显示了关于行值的信息,根据文档这是正确的,但我只需要这些信息来绘制图表,我需要显示一个字符串作为工具提示。这个字符串是由我需要格式化的一些值组成的。

这能做到吗?

对于记录,我使用PHP通过JSON向Javascript提供数据,我使用最新的API从谷歌(https://www.google.com/jsapi)。

这是我的列的定义,因为他们现在:

$data['cols'][] = array('id' => 'ID', 'label' => 'ID', 'pattern' => "", 'type' => 'string');
$data['cols'][] = array('id' => 'Fecha', 'label' => 'Fecha', 'pattern' => "", 'type' => 'number');
$data['cols'][] = array('id' => 'h', 'label' => 'h', 'pattern' => "", 'type' => 'number');
$data['cols'][] = array('id' => 'stringRes', 'label' => 'Valor', 'pattern' => "", 'type' => 'string');
$data['cols'][] = array('id' => 'Resultado', 'label' => 'Resultado', 'pattern' => "", 'type' => 'number');

提前感谢!

编辑:

(解决方案)

如果有人问同样的问题,我通过擦除我不想显示的字段的标签来解决我的问题,就是这样!

我把我的列模型改成这样:

$data['cols'][] = array('id' => 'ID', 'label' => 'Fecha', 'pattern' => "", 'type' => 'string');
$data['cols'][] = array('id' => 'Fecha', 'label' => '', 'pattern' => "", 'type' => 'number');
$data['cols'][] = array('id' => 'h', 'label' => '', 'pattern' => "", 'type' => 'number');
$data['cols'][] = array('id' => 'stringRes', 'label' => 'Resultado', 'pattern' => "", 'type' => 'string');
$data['cols'][] = array('id' => 'Resultado', 'label' => '', 'pattern' => "", 'type' => 'number');

感谢@jmac为我的问题提供了一些方法。

您可以在数据上使用setFormattedValue(),以便使用一个值来绘制图表,并且当您将鼠标悬停在它上面时弹出不同的数字。因为您正在导入数据,而我们无法看到格式,所以我们无法告诉您具体如何处理它,但这里有一个示例:

var drawVisualizations = function() {
  // Create and populate a data table.
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Force');
  data.addColumn('number', 'Level');
  // Add 2 rows.
  // google.visualization.DataTable.addRows() can take a 2-dim array of values.
  data.addRows([['Fire', 1], ['Water', 5]]);
  // Add one more row.
  data.addRow(['sand', 4]);
  // Draw a table with this data table.
  var originalVisualization = new google.visualization.Table(document.getElementById('original_data_table'));
  originalVisualization.draw(data);
  // Clone the data table and modify it a little.
  var modifiedData = data.clone();
  // Modify existing cell.
  modifiedData.setFormattedValue(1, 1, "one");
  // Draw a table with this data table.
  var modifiedVisualization = new google.visualization.Table(document.getElementById('modified_data_table'));
  modifiedVisualization.draw(modifiedData);
}

在您的示例中,您需要创建一个函数来循环遍历数据表并按您希望的格式设置项,但无论如何,这将使您能够将数字图作为一件事,但显示为另一件事。

[SOLUTION]

如果有人问同样的问题,我通过擦除我不想显示的字段的标签来解决我的问题,就是这样!

我把我的列模型改成这样:

$data['cols'][] = array('id' => 'ID', 'label' => 'Fecha', 'pattern' => "", 'type' => 'string');
$data['cols'][] = array('id' => 'Fecha', 'label' => '', 'pattern' => "", 'type' => 'number');
$data['cols'][] = array('id' => 'h', 'label' => '', 'pattern' => "", 'type' => 'number');
$data['cols'][] = array('id' => 'stringRes', 'label' => 'Resultado', 'pattern' => "", 'type' => 'string');
$data['cols'][] = array('id' => 'Resultado', 'label' => '', 'pattern' => "", 'type' => 'number');

谢谢@jmac帮我解决问题