如何显示工具提示,其中包含来自 Google 图表上具有相同 x 和 y 的多个数据点的信息



所以基本上我有看起来像这样的数据

['x', 'y', 'name']

我在散点图上显示的。

我希望将鼠标悬停在数据点时名称出现在工具提示中,所以我所做的是有类似的东西

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

然后

data.addRows([x, y, name])

我的问题是,我的数据可能有几个条目具有相同的 x 和 y。发生这种情况时,图表上会显示一个数据点,行中带有姓氏的工具提示。我希望它是几个名字的串联。

有什么方法可以调整选项来实现这一点吗?还是我注定要建立自己的逻辑来处理它?干杯

尝试以下选项...

aggregationTarget: 'category'

aggregationTarget-'category':按 x 值对所选数据进行分组。


编辑

另一种选择是将带有计算列的数据视图用于工具提示角色。

计算列具有针对每一行运行的calc函数。
在这里,找到当前行的 X、Y 值,然后检查数据表中是否有其他行具有匹配的 x、y 值,

并连接名称。

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

// create data table
var data = new google.visualization.DataTable();
data.addColumn('number', 'x');
data.addColumn('number', 'y');
data.addColumn({type: 'string', role: 'tooltip'});
// add rows
data.addRows([[x, y, name]]);
// create data view
var view = new google.visualization.DataView(data);
// set columns on data view
view.setColumns([0, 1, {
calc: function (dt, row) {
// get x, y for current row
var x = dt.getValue(row, 0);
var y = dt.getValue(row, 1);
var name = '';
// find rows with matching x, y
for (var i = 0; i < dt.getNumberOfRows(); i++) {
var testX = dt.getValue(i, 0);
var testY = dt.getValue(i, 1);
if ((x === testX) && (y === testY)) {
// concat name
if (name !== '') {
name += ', ';
}
name += dt.getValue(i, 2);
}
}
return name;
},
role: 'tooltip',
type: 'string'
}]);
// draw chart with view
chart.draw(view, options);

最新更新