时间戳

首页 > 解决方案 > 如何在新行中显示 Kendo-chart-title

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

问题描述

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

当从服务器返回大文本值时，有什么方法可以将它推送到新行。

我知道 \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

标签： angularkendo-ui-angular2

解决方案

解决此问题的一种简单方法是在组件上格式化标题。只需添加"\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")

堆栈闪电战演示

推荐阅读