Google 图表：修改工具提示

Question

我有一个使用 google 图表 API 的联合图表。在这里我想更新图表的工具提示。

由于这些图表中有很多重叠，我可能无法将鼠标悬停在每个离散点上并查看数据。

Answer 1

您可以使用 DataView 来提供计算列
为该行构建工具提示

请参阅以下代码片段...

var dataView = new google.visualization.DataView(joinedData);
dataView.setColumns([0, 1, {
  calc: function (dt, row) {
    return getTooltip(dt, row);
  },
  role: 'tooltip',
  type: 'string',
  p: {
    html: true
  }
}, 2, {
  calc: function (dt, row) {
    return getTooltip(dt, row);
  },
  role: 'tooltip',
  type: 'string',
  p: {
    html: true
  }
}]);

function getTooltip(dt, row) {
  var tooltip = '<div class="tooltip">';
  tooltip += '<div>' + dt.getFormattedValue(row, 0) + '</div>';

  tooltip += '<div>' + dt.getColumnLabel(1) + '</div>';
  if (dt.getValue(row, 1) === null) {
    tooltip += '<div>' + dt.getFormattedValue(row + 1, 1) + '</div>';
  } else {
    tooltip += '<div>' + dt.getFormattedValue(row, 1) + '</div>';
  }

  tooltip += '<div>' + dt.getColumnLabel(2) + '</div>';
  if (dt.getValue(row, 2) === null) {
    if (row > 0) {
      tooltip += '<div>' + dt.getFormattedValue(row - 1, 2) + '</div>';
    }
  } else {
    tooltip += '<div>' + dt.getFormattedValue(row, 2) + '</div>';
  }

  tooltip += '</div>';
  return tooltip;
}

完整片段 --> http://jsfiddle.net/sqdfrf8f/1/

注意：存在某种错误，
因为图表不会尊重数据视图的列属性
所以 html 属性没有设置
解决方法是使用数据视图方法 --> toDataTable()

另外：需要为 google 图表使用更新的库，请参阅 --> update library loader code

Google 图表：修改工具提示

Google chart : modify toopl tip

html

javascript

charts

tooltip

google-visualization