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

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

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

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

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

使用示例数据进行工作演示 - 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>
  );
}