Как показать кендо-чарт-заголовок в новой строке - PullRequest
Новая
       11

Как показать кендо-чарт-заголовок в новой строке

0 голосов
/ 04 сентября 2018

Я пытаюсь отобразить заголовок на основе значения, полученного от серверной части. Когда текстовое значение мало, оно правильно помещается в области диаграммы. Но когда из бэкэнда приходит большое текстовое значение, оно скрывается.

Есть ли способ, которым мы можем переместить его на новую строку, когда с сервера возвращается большое текстовое значение.

Мне известно, что \ 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

1 Ответ

0 голосов
/ 17 сентября 2018

Простой способ исправить это - отформатировать заголовок вашего компонента. Просто добавьте "\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

...