Angular Kendo Chart顶部数据截断 关闭clip属性与缩放功能冲突求解

问题根因 #

Angular Kendo Chart 默认会剪裁超出绘图 pane 范围的内容，若图表数据最高点刚好贴合 pane 上边界，顶部的数值标签、标记点就会被截断。你设置 [clip]="false" 解决了截断问题，但 pane 完全关闭剪裁后，缩放时超出范围的分类轴标签不会被裁剪，就会出现重叠异常。

可行解决方案 #

方案1（最优）：调整值轴顶部留白，保留默认剪裁能力

不需要修改 clip 属性，直接给值轴增加顶部预留空间，从根源避免内容被截断，同时默认的剪裁能力会自动处理缩放后的溢出标签：
在你的 chartOptions.valueAxis 配置中添加顶部 padding，或者动态调整值轴最大值预留偏移：

public chartOptions = {
  // 其余原有配置保持不变
  valueAxis: {
    // 新增顶部padding，数值根据截断高度调整，一般10-30即可
    padding: {
      top: 20
    },
    // 可选配置：如果是数值轴，可设置最大值为数据最大值的105%，预留顶部空间
    max: (dataMax) => dataMax * 1.05
  }
}

方案2：必须保留clip=false时，单独开启分类轴标签剪裁

如果你的场景有自定义顶部绘图元素，必须保留 [clip]="false"，可以单独给分类轴设置标签剪裁：

public chartOptions = {
  // 其余原有配置保持不变
  categoryAxis: {
    labels: {
      clip: true // 单独剪裁分类轴标签，缩放时不会溢出重叠
    }
  }
}

现有代码结构修正 #

你贴出的HTML代码存在嵌套错误：kendo-chart-panes 组件不应该嵌套在 kendo-chart-tooltip 内部，二者是平级子组件，错误嵌套会导致配置不生效，修正后的代码如下：

<kendo-chart
  *ngIf="hasTrend; else noData"
  class="mt-2 chart"
  [seriesDefaults]="chartOptions.seriesDefaults"
  [series]="chartOptions.series"
  [categoryAxis]="chartOptions.categoryAxis"
  [valueAxis]="chartOptions.valueAxis"
  [pannable]="{ lock: 'y' }"
  [zoomable]="{ mousewheel: { lock: 'y' }, selection: { lock: 'y' } }"
>
  <!-- panes 组件与tooltip平级，不要嵌套 -->
  <kendo-chart-panes>
    <kendo-chart-pane [clip]="false"></kendo-chart-pane>
  </kendo-chart-panes>

  <kendo-chart-tooltip [shared]="true">
    <ng-template kendoChartSharedTooltipTemplate let-category="category" let-points="points">
      <div class="tooltip">
        <strong>{{ getDateFormat(category) }}</strong>
        <ng-container *ngFor="let point of points">
          <div
            *ngIf="point.series.name !== 'predictionBar' && (point.value !== null || point.value === 0) && point.value !== '--'"
            class="d-flex align-item-center justify-content-between"
          >
            <span
              *ngIf="point.series.name"
              [ngStyle]="{ color: point.series.color === 'transparent' ? '#000000' : point.series.color }"
              [innerHtml]="point.series.name"
            ></span>
            <strong
              class="pl-2"
              [ngStyle]="{ color: point.series.color === 'transparent' ? '#000000' : point.series.color }"
              [innerHtml]="point.value | format: format:measure"
            ></strong>
          </div>
        </ng-container>
      </div>
    </ng-template>
  </kendo-chart-tooltip>

  <kendo-chart-legend [visible]="false"></kendo-chart-legend>
</kendo-chart>
<ng-template #noData>
  <div class="no-data-container mt-3 mb-3">
    <h5>{{ 'no_trend_desc' | translate }}</h5>
  </div>
</ng-template>

先修正结构错误，再搭配上述配置即可同时解决顶部截断、缩放标签重叠的问题。

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