如何查找谷歌图表(Sankey)选择事件选择数据-包括工具提示列

Question

我正在通过react谷歌图表创建一个Sankey图表。每次单击节点之间的链接时，我都会打印数据，直到最近，这些数据一直运行良好。

假设我的Sankey图是这样的，我点击了A&P：

[A] ----> [P] ------> [X]
[B] ----> [Q] ------> [Y]
[C] ----> [R] ------> [Z]

let myOptions = {
sankey: {
link: {
interactivity: true
}
}
}
...
...
<Chart
chartType='Sankey'
data={
[
['From', 'To', 'Weight', {role: 'tooltip', type: 'string'}],
['A', 'P', 1, 'i111'],
['B', 'Q', 1, 'j333'],
['C', 'R', 1, 'k444'],
['P', 'X', 1, 'l555'],
['Q', 'Y', 1, 'l666'],
['R', 'Z', 1, 'n999']
]
}
columns
options={myOptions}
chartEvents={[
{
eventName: 'select',
callback: ({chartWrapper}) => {
const chart = chartWrapper.getChart()
const selection = chart.getSelection()
if (selection.length === 1) {
const [selectedItem] = selection
const {row} = selectedItem
// below line was working until recently, but not anymore
console.log(chartWrapper.getDataTable().Vf[row].c)
// updated the property key after which it works
console.log(chartWrapper.getDataTable().Wf[row].c)
// returns [{v: 'A'}, {v: 'P'}, {v: 1}, {v: 'i111'}]
}
}
}
]}
/>

我也可以获得这样的选择数据，但它不会给我最后的列值，即在这种情况下的工具提示。

console.log(chartWrapper.getDataTable().cache[row])
// returns [{Me: 'A'}, {Me: 'P'}, {Me: '1'}]

除了我上面所做的以外，我还有其他方法来获取数据吗？尤其是

chartWrapper.getDataTable((。Wf[row].c

最近硬编码属性值已经三次破坏了我的UI，我希望避免这样做。

Answer 1

据我所知，sankey图表只允许您选择节点，而不允许选择节点之间的链接
并且只有在设置了interactivity选项之后才允许这样做。

options: {
sankey: {
node: {
interactivity: true
}
}
}

选择返回所选节点的名称，
该名称可以多次出现在数据表中
在下面的示例中，我添加了一个额外的"P〃；节点进行演示。

当select事件触发时，您可以从图表的选择中获取所选节点的名称
然后必须搜索数据表中的行，以找到具有匹配节点名称的行。

找到所选节点名称的数据表行后，
可以使用数据表方法getValue检索该行的值。

请参阅以下工作片段。。。

google.charts.load('current', {
packages: ['controls', 'sankey']
}).then(function () {
var chartWrapper = new google.visualization.ChartWrapper({
chartType: 'Sankey',
containerId: 'chart',
dataTable: google.visualization.arrayToDataTable([
['From', 'To', 'Weight', {role: 'tooltip', type: 'string'}],
['A', 'P', 1, 'i111'],
['B', 'Q', 1, 'j333'],
['C', 'R', 1, 'k444'],
['P', 'X', 1, 'l555'],
['P', 'Y', 2, 'l555'],
['Q', 'Y', 1, 'l666'],
['R', 'Z', 1, 'n999']
]),
options: {
sankey: {
node: {
interactivity: true
}
}
}
});
google.visualization.events.addListener(chartWrapper, 'ready', function () {
google.visualization.events.addListener(chartWrapper.getChart(), 'select', selectEvent);
});
chartWrapper.draw();
function selectEvent() {
var chart = chartWrapper.getChart();
var data = chartWrapper.getDataTable();
var selection = chart.getSelection();
if (selection.length > 0) {
// find data table rows for selected node name
var nodeName = selection[0].name;
var nodeRows = data.getFilteredRows([{
column: 0,
value: nodeName
}]);
// find row values for selected node name
nodeRows.forEach(function (row) {
var valFrom = data.getValue(row, 0);
var valTo = data.getValue(row, 1);
var valWeight = data.getValue(row, 2);
var valTooltip = data.getValue(row, 3);
console.log(valFrom, valTo, valWeight, valTooltip);
});
}
}
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>