Тип 'Element' не имеет следующих свойств из типа 'Group': дочерние элементы в Kendo UI Charts Drawing в e.createVisual ()

Question

Я использовал функцию ниже в Angular 10 для рисования диаграмм кендо на диаграмме пончиков.

  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();

Answer 1

Пожалуйста, взгляните на следующие ответы, чтобы получить желаемую кольцевую диаграмму:

1. Чтобы нарисовать более тонкий пончик, используйте свойство holeSize в SeriesItemComponent, как показано ниже:

   <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, 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 кольцевая диаграмма Kendo UI имеет текст в центре с более тонкой серией и настраиваемой легендой.