如何自定义Google Vislization图表中显示的工具提示

Question

请看这个jsfiddle，我在哪里显示特定股票的蜡烛图表。

我需要的唯一变化是我想自定义显示的工具提示。

我只想显示特定日期的收盘价。

从谷歌我发现我需要添加这样的东西来实现所需的行为

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

但我在代码

中看不到像data.addColumn这样的内容

你能告诉我如何实现这个目标吗？

http://jsfiddle.net/ovog4njt/5/

Answer 1

您正在使用arrayToDataTable()，因此您不会单独添加列和行，这就是您的示例对您没有意义的原因。

你可以这样做：

var mydata = [
  ['13-Oct', 1097.95, 1113.45, 1109.95, 1132, 'tooltip'],
  ['14-Oct', 1095.6, 1101.15, 1113.45, 1117, 'content'],
  ['15-Oct', 1092.1, 1129.2, 1116, 1132, 'goes'],
  ['16-Oct', 1130, 1170.3, 1130, 1182.4, 'in'],
  ['19-Oct', 1144.5, 1162.15, 1174, 1182.2, 'here']
];

var data = google.visualization.arrayToDataTable(mydata, true);
data.setColumnProperty(5, 'role', 'tooltip');

JSFiddle

如果您没有使用arrayToDataTable()，那么您的代码将如下所示，这就是您的示例来源。

var mydata = [
  ['13-Oct', 1097.95, 1113.45, 1109.95, 1132, 'tooltip'],
  ['14-Oct', 1095.6, 1101.15, 1113.45, 1117, 'content'],
  ['15-Oct', 1092.1, 1129.2, 1116, 1132, 'goes'],
  ['16-Oct', 1130, 1170.3, 1130, 1182.4, 'in'],
  ['19-Oct', 1144.5, 1162.15, 1174, 1182.2, 'here']
];
var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'Low Err');
data.addColumn('number', 'Low');
data.addColumn('number', 'High');
data.addColumn('number', 'High Err');

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

data.addRows(mydata);