AngularJS中Kendo UI饼图始终显示顶部Tooltip的实现咨询

我之前刚好碰到过这个需求，给你两个实用的方案来实现Kendo UI Angular饼图的Tooltip始终显示，不用等hover触发：

方案一：用Series Labels模拟永久显示的Tooltip（推荐） #

Kendo Chart的Tooltip本身是为交互触发设计的，反而Series的Labels支持永久显示，我们可以自定义Labels的模板和位置，让它看起来和Tooltip完全一样，放在饼图顶部区域：

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

@Component({
  selector: 'pie-chart-demo',
  template: `
    <kendo-chart>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="pie"
          [data]="chartData"
          field="value"
          categoryField="category"
        >
          <!-- 配置Labels永久显示，位置在饼图外侧顶部 -->
          <kendo-chart-series-item-labels
            visible="true"
            position="outsideEnd"
            [template]="customLabelTemplate"
          >
          </kendo-chart-series-item-labels>
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>

    <!-- 自定义Label模板，样式模仿Tooltip -->
    <ng-template #customLabelTemplate let-dataItem>
      <div class="persistent-tooltip">
        <strong>{{dataItem.category}}</strong>: {{dataItem.value}}%
      </div>
    </ng-template>
  `,
  styles: [`
    .persistent-tooltip {
      background: #ffffff;
      padding: 6px 10px;
      border-radius: 4px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      font-size: 13px;
      white-space: nowrap;
    }
  `]
})
export class PieChartDemoComponent {
  // 示例数据
  public chartData = [
    { category: '已完成', value: 65 },
    { category: '进行中', value: 25 },
    { category: '未开始', value: 10 }
  ];
}

方案说明： #

• 利用series-item-labels的visible="true"让内容永久显示，position="outsideEnd"把标签定位到饼图切片的外侧顶部
• 通过自定义模板customLabelTemplate来实现和Tooltip一致的样式，完全满足视觉需求
• 这个方案更稳定，符合Kendo组件的设计逻辑，不会有交互冲突的问题

方案二：手动触发Tooltip永久显示 #

如果你一定要用官方的Tooltip组件，可以通过图表渲染完成后手动调用Tooltip的show方法，强制显示所有切片的Tooltip：

import { Component, ViewChild } from '@angular/core';
import { ChartComponent } from '@progress/kendo-angular-charts';
import { TooltipDirective } from '@progress/kendo-angular-tooltip';

@Component({
  selector: 'pie-chart-tooltip-demo',
  template: `
    <kendo-chart #pieChart (rendered)="onChartRendered()">
      <!-- 配置Tooltip模板 -->
      <kendo-chart-tooltip
        #chartTooltip
        [visible]="true"
        [template]="tooltipTemplate"
      >
      </kendo-chart-tooltip>
      <kendo-chart-series>
        <kendo-chart-series-item
          type="pie"
          [data]="chartData"
          field="value"
          categoryField="category"
        >
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>

    <ng-template #tooltipTemplate let-dataItem>
      <strong>{{dataItem.category}}</strong>: {{dataItem.value}}%
    </ng-template>
  `
})
export class PieChartTooltipDemoComponent {
  @ViewChild('pieChart') chart!: ChartComponent;
  @ViewChild('chartTooltip') tooltip!: TooltipDirective;

  public chartData = [
    { category: '已完成', value: 65 },
    { category: '进行中', value: 25 },
    { category: '未开始', value: 10 }
  ];

  // 图表渲染完成后手动触发Tooltip显示
  onChartRendered() {
    const series = this.chart.seriesView.series[0];
    const points = series.points;

    // 遍历所有饼图切片，触发Tooltip显示
    points.forEach(point => {
      this.tooltip.show(point.element.nativeElement, { dataItem: point.dataItem });
    });
  }
}

方案说明： #

• 通过@ViewChild获取Chart和Tooltip实例
• 在图表的rendered事件中，遍历所有饼图切片点，调用tooltip.show()方法强制显示
• 注意：如果图表有数据更新或者窗口resize，需要重新调用这个方法来更新Tooltip位置

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