如何为Kendo Chart系列项标签添加内嵌模板？

I’ve dealt with this exact issue when working with Kendo UI Angular charts—let’s get that inline template working for your series labels to display values correctly.

The key is using the kendoChartSeriesItemLabelTemplate directive with an <ng-template> directly inside your <kendo-chart-series-item-labels> element, and properly accessing the data point context to get the value. Here’s a complete working example:

Component Template (app.component.html) #

<kendo-chart>
  <kendo-chart-title text="Sample Chart with Inline Label Templates"></kendo-chart-title>
  <kendo-chart-series>
    <kendo-chart-series-item
      [data]="salesData"
      type="column"
      name="Monthly Sales"
    >
      <kendo-chart-series-item-labels 
        [visible]="true"
        [position]="'top'"
      >
        <!-- Inline template for labels -->
        <ng-template kendoChartSeriesItemLabelTemplate let-point>
          <!-- Display the raw value, or add formatting if needed -->
          {{ point.value }}
        </ng-template>
      </kendo-chart-series-item-labels>
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

Component Class (app.component.ts) #

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // Sample data matching the chart series
  salesData = [4500, 5200, 3800, 6100, 4900];
}

What’s happening here: #

• The let-point syntax creates a local variable in the template that references the current data point object from the series.
• point.value gives you direct access to the numerical value of that data point, which is what you want to display.
• If you need formatted values (like currency or decimal precision), you can use Angular pipes directly in the template:

  {{ point.value | currency:'USD':'symbol':'1.0-0' }}
  

Common reasons your initial template might not have worked:

• Forgetting to add the kendoChartSeriesItemLabelTemplate directive to the <ng-template> (this is required to hook into the Kendo Chart’s label rendering system).
• Not using the correct context variable (let-point) to access the data point’s value.

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