从Google Charts API自定义气泡图的工具提示

时间:2012-12-28 20:34:16

标签: php javascript tooltip google-visualization bubble-chart

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

角色:工具提示,可以解决我的问题,不适用于这种图表。

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

可以这样做吗?

为了记录我正在使用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对我的问题采取了一些方法。

2 个答案:

答案 0 :(得分:1)

您可以对数据使用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);
}

在你的情况下,你需要创建一个函数来遍历你的数据表并根据你的需要格式化你的项目,但无论如何这将使你能够将数字绘图作为一个整体,但是显示为另一个。

答案 1 :(得分:0)

<强> [溶液]

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

我将我的列模型更改为:

$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对我的问题采取了一些方法。