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

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

我正在通过 react-google-charts 创建一个 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','j333'],['C','R','k444'],['P','X','l555'],['Q','Y','l666'],['R','Z','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，我想避免这样做。

解决方法

据我所知，桑基图只允许您选择节点，
不是节点之间的链接。
这只有在设置 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','j333'],['C','R','k444'],['P','X','l555'],'Y',2,['Q','l666'],['R','Z','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>