剑道图表上每个项目的多个标签答案

【问题标题】：Multiple labels per item on Kendo chart剑道图表上每个项目的多个标签
【发布时间】：2022-01-24 16:07:42
【问题描述】：

我正在尝试在 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），但它们都没有给我想要的位置。

【问题讨论】：

标签： javascript angular typescript kendo-ui-angular2 kendo-chart

【解决方案1】：

您可以使用 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函数返回值改为`$${e.dataItem.income}\`。

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

这是结果图表的图像：

【讨论】：

【解决方案2】：

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

使用图例来显示每个条的含义。比如here这个例子。
使用一些自行生成的标签并将它们放置在对 UI 有风险的表格下方。我提供了一个例子here。

【讨论】：