如何在新行中显示剑道图表标题

Question

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

当从服务器返回大文本值时，我们是否可以将其推送到新行。

我知道\ n将文本移动到新行。但我的数据是动态的，所以我不确定何时添加\ n。任何帮助将受到高度赞赏。

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

这是我的代码：

/*app.component.同时**/

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