javascript - 如何在 react 地理图表上调用点击事件？

Question

我有来自 react 地理图表的基本地理图表

<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,
        },
    }}
/>

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

还作为一个旁注，它似乎只在那个国家被传递到我的 map 时才显示悬停的国家。是否可以为所有国家启用它？

Answer 1

定义一个 chartEvents 数组。在您的情况下使用 select作为事件名称。使用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>
  );
}