我如何使用 React 更改在 highcharts 中点击树状图的图块的颜色

Question

我正在使用 High-chart 库中的树形地图图表，但我遇到了更改活动图块或被单击图块颜色的问题，我从头开始尝试通过更新当前被点击的，但它没有工作，因为它正在更新被点击的图块，我不希望我希望颜色只在我点击一个运动图块并点击其他运动图块后改变（以前的运动）应该回到它的实际颜色

<iframe src="https://codesandbox.io/embed/busy-thompson-7fsijn?fontsize=14&hidenavigation=1&theme=dark"
     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
     title="busy-thompson-7fsijn"
     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   ></iframe>

下面是我的代码link，希望大家能帮我解决这个问题先谢谢了

https://codesandbox.io/embed/busy-thompson-7fsijn?fontsize=14&hidenavigation=1&theme=dark

https://codesandbox.io/s/busy-thompson-7fsijn?file=/src/App.js

Answer 1

在标题中设置一个class名称并给一个样式来改变颜色

Answer 2

首先，为了避免不必要的图表重绘，请记住您的选项或将它们保持在一个状态。要更改单击点的颜色并恢复原始颜色，您可以将当前颜色保存在一个系列上并使用 point.update 方法到 change/restore。例如：

click: function(event) {
  const point = event.point;
  const prevClickedPoint = point.series.clickedPoint;

  if (prevClickedPoint) {
    prevClickedPoint.update({ color: prevClickedPoint.orgColor }, false);
  }

  point.orgColor = point.color;
  point.series.clickedPoint = point;

  point.update({ color: "red" }, false);
  point.series.chart.redraw();

  if (point.node.childrenTotal === 0) {
    var category = point.node.name;

    setSports(category);
  }
}

现场演示： https://codesandbox.io/s/stupefied-wave-ibtc2-ibtc2r?file=/src/App.js

API参考：https://api.highcharts.com/class-reference/Highcharts.Point#update

我如何使用 React 更改在 highcharts 中点击树状图的图块的颜色

How can i change the color of a tile which was clicked of a treemap in highcharts using react

javascript

reactjs

highcharts

react-hooks

react-highcharts