0

我正在通过 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', 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[行].c

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

4

1 回答 1

0

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

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

selection 返回所选节点的名称，该名称
可以在数据表中出现多次。
在下面的示例中，我添加了一个额外的“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>

于 2021-06-30T13:56:52.437 回答