如何使用react更改在highcharts中的树形图上单击的图块的颜色？

elcex8rz 于 2022-11-10 发布在 Highcharts

关注(0)|答案(2)|浏览(221)

我使用的是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>

下面是我的代码的链接，我希望你们能帮助我这个提前感谢
https://codesandbox.io/embed/busy-thompson-7fsijn?fontsize=14&hidenavigation=1&theme=dark
https://codesandbox.io/s/busy-thompson-7fsijn?file=/src/App.js

highcharts

来源：https://stackoverflow.com/questions/72160361/how-can-i-change-the-color-of-a-tile-which-was-clicked-of-a-treemap-in-highchart

2条答案

按热度按时间

5cg8jx4n1#

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

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

赞(0）回复(0）举报 2022-11-10

zhte4eai2#

在标题中设置一个类名，并给予一个样式来改变颜色

赞(0）回复(0）举报 2022-11-10