迁移至ABP.io后使用kendo-chart-category-axis-item组件报错

1. 对齐Kendo UI与ABP.io的依赖版本 #

ABP.io的Angular模板会锁定特定版本的Angular及相关依赖，若你的Kendo UI for Angular版本与ABP.io的Angular版本不兼容，会触发此类运行时错误：

• 查看项目package.json中@angular/core的版本
• 安装与该Angular版本兼容的Kendo UI版本
• 执行npm install更新依赖

2. 为图表系列指定分类字段关联 #

添加分类轴后，Kendo图表需要明确系列数据与分类的对应关系，纯数值数组的data结构会导致内部解析异常。修改数据结构为对象数组，并配置关联字段：

<kendo-chart [style.height]="'125px'">
  <kendo-chart-tooltip>
    <ng-template kendoChartSeriesTooltipTemplate let-value="value">
      {{ value }}
    </ng-template>
  </kendo-chart-tooltip>
  <kendo-chart-area [background]="chartBackgroundColor"></kendo-chart-area>
  <kendo-chart-category-axis>
    <kendo-chart-category-axis-item [categories]="['Count']">
      <kendo-chart-category-axis-item-labels [rotation]="-90"></kendo-chart-category-axis-item-labels>
    </kendo-chart-category-axis-item>
  </kendo-chart-category-axis>
  <kendo-chart-series>
    <kendo-chart-series-item
      type="bar"
      [color]="afterColor"
      [stack]="true"
      [data]="[{ category: 'Count', value: 9 }]"
      categoryField="category"
      field="value"
      *ngIf="sketch && mitigation">
    </kendo-chart-series-item>
    <kendo-chart-series-item
      [color]="beforeColor"
      type="bar"
      [data]="[{ category: 'Count', value: 21 }]"
      categoryField="category"
      field="value">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

3. 禁用分类轴十字线 #

错误信息涉及createCrosshairTooltips，可尝试显式禁用分类轴的十字线功能：

<kendo-chart-category-axis-item [categories]="['Count']">
  <kendo-chart-category-axis-item-labels [rotation]="-90"></kendo-chart-category-axis-item-labels>
  <kendo-chart-category-axis-item-crosshair [visible]="false"></kendo-chart-category-axis-item-crosshair>
</kendo-chart-category-axis-item>

4. 确认模块导入完整性 #

迁移到ABP.io后，需确保对应Angular模块中完整导入Kendo图表相关模块：

import { ChartsModule } from '@progress/kendo-angular-charts';

@NgModule({
  imports: [
    // ...其他模块
    ChartsModule
  ]
})
export class YourFeatureModule { }

内容的提问来源于stack exchange，提问作者nll_ptr