0

我制作了一个饼图@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>

注意:我映射一个数组以显示多个饼图

悬停前

在此处输入图像描述

悬停后

在此处输入图像描述

4

0 回答 0