CanvasJS React - 如何在处理点击事件的同时使饼图切片突出显示（又名爆炸）

Question

我正在使用 React 并使用来自 canvasjs 的饼图： https://canvasjs.com/docs/charts/chart-types/html5-pie-chart/

图表有一个可选的 'click' 函数用于处理事件。这是相关的文档。 https://canvasjs.com/docs/charts/chart-options/data/click/

问题是当我实现 'click' 并调用一个函数来更新我的标签（在父组件中）时，它改变了默认行为并且不再扩展切片。

我尝试了很多不同的方法来修复它，但似乎无法解决这个问题。

此代码用于更新父级中的标签 - 请注意行 'click: this.props.onSliceSelected'。然后我可以从事件中获取切片标签并更新我的标签。

但如前所述，当我这样做时，切片不再扩展。

data: [{
                type: "pie",
                animationEnabled: true,
                startAngle: 75,
                toolTipContent: "Select: <b>{label}</b> - {y}% of Total",
                showInLegend: false,
                legendText: "{label}",
                indexLabelFontSize: 16,
                indexLabelFontColor: "white",
                indexLabel: "{label}",
                click: this.props.onSliceSelected,
                dataPoints: sortedData,
                

            }]

我已经尝试了许多其他方法来确保切片被选中 - 大多数涉及尝试在数据点上设置 exploded = true。

我在任何地方都找不到如何执行此操作的工作示例。

感谢任何想法。

编辑 - 这是一个屏幕截图，我需要更新 'selected task'（在图表之外和父组件中）。现在标签会更新，但图表不会展开！

Answer 1

要在单击每个切片时更新饼图中的标签，您可以在 chart-options and call chart.render(). Here is a working StackBlitz 中更新 dataPoints[index].label 以进行相同的更新。

CanvasJS React - 如何在处理点击事件的同时使饼图切片突出显示（又名爆炸）

CanvasJS React - How to make a pie chart slice highlight (aka explode) while at the same time handling the click event

reactjs

canvasjs