如何在 reactjs react-google-charts 的 TreeMap 上获取选择值

Question

我想获取用户在图中选择的节点的值。我试过这个解决方案，但没有得到值。

const ChartEvents = [
  { eventName: "select",callback({ chartWrapper }) {console.log("Selected ", chartWrapper.getChart().getSelection());}];


<Chart chartType="TreeMap" data={data} graphID="TreeMap" options={options} width="100%" height="400px" chartEvents={ChartEvents} />

codesandbox code

Answer 1

您需要在图表包装器上使用 'ready' 事件，
然后在图表上分配 'select' 事件，
如下...

const ChartEvents = [
  {
    eventName: "ready",
    callback: ({ chartWrapper, google }) => {
      const chart = chartWrapper.getChart();
      const data = chartWrapper.getDataTable();
      google.visualization.events.addListener(chart, "select", function () {
        var selection = chart.getSelection();
        console.log("Selected ", selection);
        if (selection.length > 0) {
          console.log("Market trade volume (size) ", data.getValue(selection[0].row, 2));
          console.log("Market increase/decrease (color) ", data.getValue(selection[0].row, 3));
        }
      });
    }    
  }
];

如何在 reactjs react-google-charts 的 TreeMap 上获取选择值

How can I getSelection value on the TreeMap in reactjs react-google-charts

charts

google-visualization

reactjs

react-google-charts