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

Question

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

图表有一个可选的“点击”功能来处理事件。这是相关的文档。 https://canvasjs.com/docs/charts/chart-options/data/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。

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

欣赏任何想法。

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

Answer 1

要在单击每个切片时更新饼图中的标签，您可以更新chart-options 中的dataPoints[index].label 并调用chart.render()。这是同样的工作StackBlitz。