类型“元素”缺少类型“组”中的以下属性：Kendo UI图表中的子项位于e.createVisual

问题描述

我在Angular 10中将以下功能用于在Donut Chart上绘制的Kendo Charts

  public visual(e: SeriesVisualArgs): Group {
    // Obtain parameters for the segments
    this.center = e.center;
    this.radius = e.innerRadius;
    // Create default visual
    return e.createVisual();
  }

出现以下错误

ERROR in src/app/modules/sidenav/dashboard/dashboard.component.ts:85:5 - error TS2740: Type 'Element' is missing the following properties from type 'Group': children,append,clear,insert,and 2 more.

85     return e.createVisual();

解决方法

请查看以下答案以获取所需的甜甜圈图：

1. 要绘制更薄的甜甜圈，请使用SeriesItemComponent中的holeSize属性，如下所示：

   <kendo-chart-series>
     <kendo-chart-series-item type="donut" [data]="data" [holeSize]="120">
     </kendo-chart-series-item>
   </kendo-chart-series>
   

2. 我们有专门的文档可在中心显示信息。使用以下语法在“中心模板”中添加文本：

   <kendo-chart>
     <ng-template kendoChartDonutCenterTemplate>
       <h3> $10800.71 </h3>
       <span> Total Payroll Cost </span>
     </ng-template>
   </kendo-chart>
   

3. 使用LegendItemComponent的视觉属性绘制自定义图例。例如：

   <kendo-chart-legend position="bottom">
     <kendo-chart-legend-item [visual]="visual"></kendo-chart-legend-item>
   </kendo-chart-legend>
   public visual(e: LegendItemVisualArgs) {
   
     var item = e.series.data[e.pointIndex];
   
     const path1 = new Path({
       stroke: { color: e.options.labels.color,width: 1 },fill: { color: e.options.markers.background }
     });
     path1.moveTo(0,0).lineTo(100,30).lineTo(0,30).close();
   
     const path2 = new Path({
       stroke: { color: e.options.labels.color,width: 1 }
     });
     path2.moveTo(0,30).lineTo(100,130).lineTo(0,130).close();
   
     var title = new Text(item.type,[25,8],{
       stroke: { color: e.options.labels.color,width: 0.5 }
     });
   
     var line1 = new Text("$" + item.amount,40],width: 0.5 }
     });
   
     var line2 = new Text("for",[45,60],width: 0.5 }
     });
   
     var line3 = new Text(item.employees,[42,80],width: 0.5 }
     });
   
     var line4 = new Text("Employees",100],width: 0.5 }
     });
   
     const group = new Group();
     group.append(path1,path2,title,line1,line2,line3,line4);
     return group;
     }
   

在此StackBlitz example中，Kendo UI甜甜圈图的中心是文本，带有更细的系列和自定义图例。