Динамический кендо-чарт-сериал-элемент Kendo UI Angular 6 - PullRequest
Новая
       12

Динамический кендо-чарт-сериал-элемент Kendo UI Angular 6

0 голосов
/ 16 января 2019

Я использую тип диапазона для достижения некоторых требований (см. URL). Проблема в том, что данные динамические, и есть ли способ обработки динамических данных? , В приведенном ниже примере есть только два набора записей data1 и data2, и в моем случае это может быть больше пяти и его динамика. 

    <kendo-chart style="height: 200px;" [valueAxis]="{ min: 1765 }">

          <kendo-chart-series>
            <kendo-chart-series-item type="rangeBar" [spacing]="-1"
                                     [data]="data1" fromField="start" toField="end" categoryField="category">
            </kendo-chart-series-item>
            <kendo-chart-series-item type="rangeBar"
                                     [data]="data2" fromField="start" toField="end" categoryField="category">
            </kendo-chart-series-item>        
          </kendo-chart-series>
        </kendo-chart>



public data1 = [
    { category: "A", start: 1765, end: 1780, color: 'blue' },
    { category: "B", start: 1765, end: 1798, color: 'blue' },
    { category: "C", start: 1765, end: 1802, color: 'blue' }
  ];

  public data2 = [
    { category: "A", start: 1780, end: 1798, color: 'red' },
    { category: "B", start: 1798, end: 1802, color: 'red' },
    { category: "C", start: 1802, end: 1810, color: 'red' }
  ];

Требование: https://i.stack.imgur.com/G7VkI.png

1 Ответ

0 голосов
/ 17 января 2019 
Finally I solved it

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

@Component({
  selector: 'my-app',
  template: `
    <kendo-chart style="height: 200px;" [valueAxis]="{ min: 100 }">
      <kendo-chart-series>
        <kendo-chart-series-item 
        type="rangeBar" [spacing]="-1" 
        *ngFor="let series of model" [data]="series.data" 
        fromField="start" toField="end" categoryField="category">
        </kendo-chart-series-item>                  
      </kendo-chart-series>
    </kendo-chart>

  `
})
export class AppComponent {
  public data1 = [
    { category: "A", start: 100, end: 110, color: 'blue' },
    { category: "B", start: 110, end: 120, color: 'blue' },
    { category: "C", start: 120, end: 130, color: 'blue' }
  ];

  public data2 = [
    { category: "A", start: 120, end: 130, color: 'red' },
    { category: "B", start: 130, end: 140, color: 'red' },
    { category: "C", start: 140, end: 150, color: 'red' }
  ];  

   public showSeries: boolean = false;
    public model = [];


 constructor(){

   this.model.push({ data:this.data1 });  

   this.model.push({data:this.data2  });

   console.log(JSON.stringify(this.model));


 }




}
...