如何在新行中显示 Kendo-chart-title

Question

我正在尝试根据从后端收到的值来显示标题。当文本值较小时，它适合图表区域。但是当大文本值来自后端时，它会被隐藏。

当从服务器返回大文本值时，我们有什么办法可以将它推到一个新行。

我知道 \n 会将文本移到新行。但我的数据是动态的，所以我不确定何时添加 \n。任何帮助将不胜感激。

我想的一种方法是计算字符串的长度并添加 '\n' 不确定这是否是正确的方法。

这是我的代码：

/*app.component.ts**/

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <div id="chart-wrapper">
    <kendo-chart [seriesColors]="['orange', '#ffe']">
    <kendo-chart-title text={{title}}></kendo-chart-title>
      <kendo-chart-legend position="top"></kendo-chart-legend>
      <kendo-chart-area background="#eee" [margin]="0"> </kendo-chart-area>
      <kendo-chart-series>
        <kendo-chart-series-item type="pie"
          [data]="pieData"
          field="value"
          categoryField="category">
        </kendo-chart-series-item>
      </kendo-chart-series>
    </kendo-chart>
    <div>
  `
})
export class AppComponent {
  public pieData: any = [
    { category: 'Eaten', value: 0.42 },
    { category: 'Not eaten', value: 0.58 }
  ]

  public title = "this is test title to check whether it breaks in new line or not";
}

问题的 Stackblitz：https://stackblitz.com/edit/angular-aqdtsd?file=app/app.component.ts

Answer 1

解决此问题的一个简单方法是在组件上设置标题格式。只需将 "\n" 添加到标题中，它将分解为行

public title = "this is test \n title to check whether it breaks in new line or not";

这是一个逻辑

this.title = this.title.replace(/(.{30})/g,"\n")

STACKBLITZ DEMO

如何在新行中显示 Kendo-chart-title

How to show Kendo-chart-title in new line

kendo-ui-angular2

angular