类型 'Element' 缺少类型 'Group' 中的以下属性:Kendo UI 中的子项图表绘制在 e.createVisual()

Type 'Element' is missing the following properties from type 'Group': children in Kendo UI Charts Drawing at e.createVisual()

我在 Angular 10 中使用了下面的函数来绘制圆环图 Kendo 图表

  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> 800.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, 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, 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, [25, 40], {
        stroke: { color: e.options.labels.color, width: 0.5 }
      });
    
      var line2 = new Text("for", [45, 60], {
        stroke: { color: e.options.labels.color, width: 0.5 }
      });
    
      var line3 = new Text(item.employees, [42, 80], {
        stroke: { color: e.options.labels.color, width: 0.5 }
      });
    
      var line4 = new Text("Employees", [25, 100], {
        stroke: { color: e.options.labels.color, width: 0.5 }
      });
    
      const group = new Group();
      group.append(path1, path2, title, line1,  line2,  line3,  line4);
      return group;
      }
    

在此 StackBlitz example 中,Kendo UI 圆环图的中心有文本,带有更细的系列和自定义图例。