我正在React中工作,并使用来自canvasjs的饼图:https ://canvasjs.com/docs/charts/chart-types/html5-pie-chart/
图表具有用于处理事件的可选“单击”功能。这是该文档。https://canvasjs.com/docs/charts/chart-options/data/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。
我在任何地方都找不到如何执行此操作的示例。
欣赏任何想法。
编辑-这是一个屏幕截图,我需要更新“选定的任务”(在图表外部和父组件中)。现在,标签将更新,但图表不会扩展!
要在单击每个切片时更新饼图中的标签,可以dataPoints[index].label
在chart-options中进行更新并调用chart.render()
。这是一个工作正常的StackBlitz。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句