如何在反应地理图表上调用点击事件？

Question

我有来自 React geocharts 的基本地理图表

<Chart
    width={calculateMapHeight()}
    height={'575px'}
    chartType="GeoChart"
    data={user.details}
    getSelection={(e) => console.log('test')}
    select={console.log('test')}
    enableRegionInteractivity={true}
    regionClick={(e) => console.log('test')}
    onClick={(e) => console.log('test')}
    mapsApiKey="apikey"
    rootProps={{ 'data-testid': '1' }}
    options={{
        backgroundColor: 'transparent',
        defaultColor: red,
        animation: {
            startup: true,
            duration: 2500,
        },
    }}
/>

但我无法弄清楚当用户点击某个国家/地区时我需要做什么来调用事件？我已尝试通过上述所有方法记录内容，但没有任何效果

另请注意，当该国家/地区已传递到我的地图时，它似乎只显示该国家/地区处于悬停状态。是否可以为所有国家/地区启用它？

Answer 1

有一个example正在处理select事件。

使用您的代码：

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

<Chart
    width={calculateMapHeight()}
    height={'575px'}
    chartType="GeoChart"
    data={user.details}
    chartEvents={chartEvents}
    enableRegionInteractivity={true}
    mapsApiKey="apikey"
    rootProps={{ 'data-testid': '1' }}
    options={{
        backgroundColor: 'transparent',
        defaultColor: red,
        animation: {
            startup: true,
            duration: 2500,
        },
    }}
/>

注意：如果您使用某些旧版本 < 3.0，则 chartEvents 道具不可用，您可以使用 events 道具。

Answer 2

定义一组图表事件。在您的情况下，使用 select 作为 eventName。使用 chartEvents prop 并为其提供 chartEvents 数组。

回调接收选定的数组，您可以使用该数组计算图表 data 数组的索引。选择国家后，只需使用您的原始整体 data 并找到所选国家。

使用 ready 事件并进行 api 调用并获取所有国家并将它们置于一个状态并将其用作图表的数据。这样，您可以动态地在图表中填充所有国家/地区

Working demo with sample data - codesandbox

const options = {
  title: "Population of Largest U.S. Cities",
  chartArea: { width: "30%" },
  hAxis: {
    title: "Total Population",
    minValue: 0
  },
  vAxis: {
    title: "City"
  }
};

export default function App() {
  const [allCountries, setAllCountries] = useState([["Country"]]);
  const chartEvents = [
    {
      eventName: "select",
      callback({ chartWrapper }) {
        const selectedId = chartWrapper.getChart().getSelection();
        if (selectedId.length) {
          // console.log("Selected Country", data[selectedId[0].row + 1]);
          console.log("Selected Country", allCountries[selectedId[0].row + 1]);
        } else {
          console.log("No Country to show ");
        }
      }
    },
    {
      eventName: "ready",
      callback: ({ chartWrapper, google }) => {
        fetch("https://restcountries.eu/rest/v2/all").then(res =>
          res.json().then(res => {
            const allCountries = res.map(c => [c.name]);
            console.log("allCountries", allCountries);
            setAllCountries(prev => [...prev, ...allCountries]);
          })
        );
      }
    }
  ];
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Chart
        // width={calculateMapHeight()}
        height={"575px"}
        width={"575px"}
        chartType="GeoChart"
        // data={user.details}
        chartEvents={chartEvents}
        // data={data}
        data={allCountries}
        getSelection={e => console.log("test")}
        // select={() => console.log("test")}
        enableRegionInteractivity={true}
        regionClick={e => console.log("test")}
        onClick={e => console.log("test")}
        mapsApiKey="apikey"
        rootProps={{ "data-testid": "1" }}
        options={{
          backgroundColor: "transparent",
          defaultColor: "red",
          animation: {
            startup: true,
            duration: 2500
          }
        }}
      />
    </div>
  );
}

如何在反应地理图表上调用点击事件？

How to call a click event on react geo chart?

javascript

reactjs

react-google-charts