我制作了一个饼图@syncfusion/ej2-react-lineargauge
问题是我有一个数据标签,每当我悬停以获取工具提示时,它就会不断消失。
我为数据标签传入一个模板函数来覆盖默认值
数据标签适用于默认模板,但在模板传递时会在悬停时消失
<AccumulationChartComponent
id={`pie-chart_${iIndex}`}
tooltip={{enable: true}}
legendSettings={{
position: 'Bottom',
visible: true,
width: '100%',
}}
width="100%"
ref={chart => currentInstance = chart}
background={'transparent'}
height={'80%'}
legendRender={(e) => {
const obj = data.filter((t) => t.name === e.text)[0];
e.text = `${obj.name.replaceAll("_", " ")}`;
}}
enableSmartLabels={'true'}
>
<Inject
services={[PieSeries, AccumulationDataLabel, AccumulationTooltip, AccumulationLegend, Export]}
/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective
dataSource={data}
xName='name'
yName='insight_value'
// startAngle={60}
innerRadius='20%'
dataLabel={{
visible: true,
position: 'Outside',
font: {
fontWeight: '600',
color: '#000',
size: '13px'
},
format: `adasd `,
template: (args) => {
return (
<div id={`template-wrap-${iIndex}`}>
<span>{`${args.point.percentage}%`}</span>
<span>{`(${args.point.y})`}</span>
</div>
)
},
}}
tooltip={{
enable: true,
}}
palettes={[
'#CA6D4C', '#F89247',
'#FFB82C', '#FAD817',
'#FF9377', '#C84A4C',
'#9A3634'
]}
>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
注意:我映射一个数组以显示多个饼图
悬停前
悬停后