Kendo 图表系列项目标签的顶部位置

Question

我有 Kendo 个柱形图，每个类别有多个系列。

我正在尝试将 Kendo 图表系列项目标签放在最上面，而不考虑值。默认情况下，它放在图表项的末尾。因此，对于正值，它位于列的顶部，对于负值，它位于底部。

app.component.html

<kendo-chart>
  <kendo-chart-category-axis>
    <kendo-chart-category-axis-item [labels]="{ margin: { top: 10 } }">
    </kendo-chart-category-axis-item>
  </kendo-chart-category-axis>

  <kendo-chart-value-axis>
    <kendo-chart-value-axis-item>
    </kendo-chart-value-axis-item>
  </kendo-chart-value-axis>

  <kendo-chart-series>
    <kendo-chart-series-item *ngFor="let groupedResult of groupedData"
                            [data]="groupedResult.items"
                            field="income"
                            type="column"
                            categoryField="clientName"
                            noteTextField="income">
      <kendo-chart-series-item-labels format="C0">
      </kendo-chart-series-item-labels>
      <kendo-chart-series-item-notes position="bottom"
                                     [icon]="{ visible: false }"
                                     [line]="{ width: 0 }"
                                     [label]="noteLabel">
      </kendo-chart-series-item-notes>
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

app.component.ts

import { Component, OnInit } from '@angular/core';
import * as _ from 'lodash';

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

export type GroupedTrendItem = {
  value: { year: number; period: number };
  items: TrendItem[];
};

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  public trendItems: TrendItem[] = [
    {
      clientName: 'Client1',
      year: 2020,
      period: 3,
      income: -35,
    },
    {
      clientName: 'Client1',
      year: 2020,
      period: 4,
      income: 40,
    },
    {
      clientName: 'Client2',
      year: 2020,
      period: 1,
      income: -15,
    },
    {
      clientName: 'Client2',
      year: 2020,
      period: 2,
      income: 20,
    },
    {
      clientName: 'Client2',
      year: 2020,
      period: 3,
      income: 15,
    },
    {
      clientName: 'Client3',
      year: 2020,
      period: 2,
      income: 50,
    },
    {
      clientName: 'Client3',
      year: 2020,
      period: 3,
      income: -35,
    },
    {
      clientName: 'Client3',
      year: 2020,
      period: 4,
      income: 20,
    },
  ];

  public noteLabel = {
    color: 'black',
    content: e => `Q${e.dataItem.period} ${e.dataItem.year}`,
    font: '12px Arial',
    margin: -30,
  };

  private getGroupedTrends() {
    const groupedTrendItems = this.trendItems.reduce((acc, trendItem) => {
      let element = acc.find(el => el.value.year === trendItem.year
        && el.value.period === trendItem.period
      );

      if (element) {
        element.items.push(trendItem);
      } else {
        acc.push({
          value: { year: trendItem.year, period: trendItem.period },
          items: [trendItem],
        });
      }
      return acc;
    }, [] as GroupedTrendItem[]);

    return _.sortBy(groupedTrendItems, [
      item => item.value.year,
      item => item.value.period,
    ]);
  }

  public groupedData = this.getGroupedTrends();

  public ngOnInit() {
    console.log(this.groupedData);
  }
}

您可以尝试此代码 here。

不幸的是，在使用柱形图时，标签没有可用的 'top' 选项用于 SeriesLabelsPosition 组件（说实话，我不知道为什么）。如果我不需要显示句点，我将像现在一样使用 SeriesNotesComponent 作为句点。他们可以毫无问题地分配 position="top"。

所以，问题是如何让标签显示在列的顶部，而不考虑值。

Answer 1

SeriesNoteLabel 支持“新行”，您可以合并期间和成本；我已经为你准备了Stackblitz例子

content: e => `Q${e.dataItem.period} ${e.dataItem.year} \n ${this.currencyPipe.transform(e.dataItem.income)}`,

Answer 2

这个有效

<kendo-chart-series-item-labels format="C0" position="top" [margin]="-25">
</kendo-chart-series-item-labels>

Stackblitz：https://stackblitz.com/edit/angular-hsczmx-swsaon?file=app/app.component.html

Kendo 图表系列项目标签的顶部位置

Top position for Kendo chart series item label

javascript

typescript

kendo-chart

kendo-ui-angular2

angular