javascript - 谷歌图表 : modify toopl tip

Question

我有一个使用谷歌图表 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/

---

注意:有一些错误，
因为图表不会尊重数据 View 的列属性
所以 html 属性没有设置
解决方法是使用数据 View 方法 --> toDataTable()

另外:需要为谷歌图表使用更新的库，参见 --> update library loader code