Kendo 图表上每个项目有多个标签

Question

我试图在 Kendo 柱形图上为每个项目获取多个标签所需的布局如下所示

我只能得到这个布局

import { Component } from '@angular/core';
import { groupBy, GroupResult } from '@progress/kendo-data-query';
import { ValueAxisLabels } from '@progress/kendo-angular-charts';

export type TrendItem = {
  clientName: string;
  periodName: string;
  income: number;
};

@Component({
  selector: 'my-app',
  template: `
        <kendo-chart>
          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item [categories]="categories">
              </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

          <kendo-chart-value-axis>
              <kendo-chart-value-axis-item [labels]="valueAxisLabels">
              </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>

          <kendo-chart-series>
            <kendo-chart-series-item *ngFor="let groupedResult of groupedTrendsByPeriod" [data]="groupedResult.items" field="income" type="column">
              <kendo-chart-series-item-labels [content]="labelVisual">
              </kendo-chart-series-item-labels>
           </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `,
})
export class AppComponent {
  public valueAxisLabels: ValueAxisLabels = {
    font: 'bold 16px Arial, sans-serif',
  };

  public trendItems: TrendItem[] = [
    {
      clientName: 'Client1',
      periodName: 'Q1 2020',
      income: 20,
    },
    {
      clientName: 'Client1',
      periodName: 'Q2 2020',
      income: 15,
    },
    {
      clientName: 'Client1',
      periodName: 'Q3 2020',
      income: 35,
    },
    {
      clientName: 'Client1',
      periodName: 'Q4 2020',
      income: 40,
    },
    {
      clientName: 'Client2',
      periodName: 'Q1 2020',
      income: 15,
    },
    {
      clientName: 'Client2',
      periodName: 'Q2 2020',
      income: 20,
    },
    {
      clientName: 'Client2',
      periodName: 'Q3 2020',
      income: 15,
    },
    {
      clientName: 'Client2',
      periodName: 'Q4 2020',
      income: 30,
    }
  ];

  public categories = (groupBy(this.trendItems, [{ field: 'clientName' }]) as GroupResult[])
    .map((e) => e.value);

  public groupedTrendsByPeriod = groupBy(this.trendItems, [{ field: 'periodName' }]) as GroupResult[];

  public labelVisual(e: { dataItem: TrendItem }) {
    return `$${e.dataItem.income}\r\n${e.dataItem.periodName}`;
  }
}

您可以在此处尝试此代码。

我目前的结果是这样的

---

所以我的问题是如何像第一张图片一样显示每个项目的多个标签？

---

我目前的障碍。

• 我没有找到添加多个元素的方法<kendo-chart-series-item-labels>。仅渲染其中一个，其余部分将被忽略。
• 我没有找到将标签放置在柱形图下方的方法。对于柱形图，只能使用“center”、“insideBase”、“insideEnd”、“outsideEnd”选项（根据API 参考），但它们都没有给我所需的位置。

Answer 1

您可以使用 KendoChartComponent 的注释功能。

您可以在此处查看实现。

1. 您添加noteTextField="periodName" [notes]="notesOptions"到您的kendo-chart-series-item元素中。

2. 您添加[labels]="labelOptions"到您的kendo-chart-category-axis-item元素中。

3. 您将以下内容添加到您的组件中：

   public notesOptions = {
       position: 'bottom',
       icon: {
           visible: false,
       },
       label: {
           color: 'black',
           content: (e) => e.dataItem.periodName,
           font: "12px Arial",
           margin: -30,
       },
       line: {
           width: 0,
       },
   };
   
   public labelOptions = {
       margin: {
           top: 10,
       },
   };
   

4. 将labelVisual函数返回值更改为`$${e.dataItem.income}\`。

注意：可以执行一些更改并仍然提供所需的设计，因此如果某些内容不完全正确，则可能可以修复。

这是生成的图表的图像：