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}`;
  }
}

您可以尝试此代码 here。

我目前的结果是这样的

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

我目前的障碍。

我没有找到添加多个 <kendo-chart-series-item-labels> 元素的方法。只会渲染一个，其余的将被忽略。
我找不到在柱形图下方放置标签的方法。对于柱形图，只能使用“center”、“insideBase”、“insideEnd”、“outsideEnd”选项（根据 API Reference），但其中的 none 给出了我想要的位置。

Answer 1

我认为 kendo 没有为此提供任何本地解决方案，但我可以建议的是：

使用图例来显示每个条的含义。就像例子 here.
使用一些自己生成的标签并将它们放在 table 下，这对 UI 来说是有风险的。我提供了一个例子 here.

Answer 2

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

你可以看到实现here。

您将 noteTextField="periodName" [notes]="notesOptions" 添加到 kendo-chart-series-item 元素。
您将 [labels]="labelOptions" 添加到 kendo-chart-category-axis-item 元素。

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

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,
    },
};

将 labelVisual 函数 return 的值更改为 `$${e.dataItem.income}\`。

注意：可以进行一些更改，但仍会提供所需的设计，因此如果有什么地方不完全正确，它可能是可以修复的。

这是结果图表的图片：

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

Multiple labels per item on Kendo chart

javascript

angular

typescript

kendo-ui-angular2

kendo-chart