данные второй серии начинаются с неправильного (начального) места многоосевой линейной диаграммы с использованием угловой или угловой диаграммы кендо

Question

У меня есть данные ниже json, и я хочу реализовать линейную диаграмму, используя кендо угловую 2 или угловую линейную диаграмму.

Я могу построить первую серию, но вторая серия начинается не с того места.

Мне нужно "clientObservationTime" по оси x и цена по оси Y и SourceModelName как серия или этикетка. Мои данные являются динамическими, возможно, что в json может появиться другое имя источника. Я узнал, что мой массив данных должен быть одинаковой длины для всех данных в наборе данных, но в моих данных это невозможно. Чтобы сделать данные одинаковыми, я могу добавить ноль, тогда вторая серия работает правильно, но так как мои данные являются динамическими, я не могу найти нулевое место в массиве данных. Поскольку данные являются динамическими, их сложно.

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

Есть ли какая-нибудь подсказка для этой проблемы, которая была бы очень признательна.

Заранее спасибо

пожалуйста, найдите ниже код в угловых 2 или 5.

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


    @Component( {
      selector: 'line-chart-demo',
      templateUrl: '
    <div style="width: 60%;">
      <canvas baseChart
              [chartType]="'line'"
              [datasets]="chartData"
              [labels]="chartLabels"
              [options]="chartOptions"
              [legend]="true"
              (chartClick)="onChartClick($event)"></canvas>


    </div>
    '
    } )
    export class Test {
      chartOptions = {
        responsive: true,
        elements: {
          line: {
            fill: false,
            tension: 0,
            borderWidth: 1
          },
          point: {
            radius: 5,
            hitRadius: 4
          }
        },
        scales: {
          xAxes: [
            {
              type: 'time',
              distribution: 'linear',
              display: true,
              scaleLabel: {
                display: true,
                labelString: "Time"
              }
            }
          ],
          yAxes: [
            {
              ticks: {
                beginAtZero: false
              },
              display: true,
              scaleLabel: {
                display: true,
                labelString: "Price",
              }
            }
          ]
        }
      };
      modelNames: Array<any> = [];
      chartData: Array<any> = [];
      chartLabels: Array<any> = [];

      public details = [
        {
          "observationTime": "2018-08-21T00:10:00.345-04:00",
          "price": 1.3589726167017735,
          "sourceModelName": "AQR_RTR_FX_INTRADAY",
          "clientObservationTime": "2018-08-21T00:10:00.345-04:00"
        },
        {
          "observationTime": "2018-08-21T00:30:00.345-04:00",
          "price": 1.3689726167017735,
          "sourceModelName": "AQR_RTR_FX_INTRADAY",
          "clientObservationTime": "2018-08-21T00:30:00.345-04:00"
        },
        {
          "observationTime": "2018-08-21T00:55:00.345-04:00",
          "price": 1.3789726167017735,
          "sourceModelName": "AQR_RTR_FX_INTRADAY",
          "clientObservationTime": "2018-08-21T00:55:00.345-04:00"
        },
        {
          "observationTime": "2018-08-21T02:10:00.345-04:00",
          "price": 1.3989726167017735,
          "sourceModelName": "AQR_RTR_FX_INTRADAY",
          "clientObservationTime": "2018-08-21T02:10:00.345-04:00"
        },
        {
          "observationTime": "2018-08-21T00:10:00.345-04:00",
          "price": null,
          "sourceModelName": "AQR_RTR_FX",
          "clientObservationTime": "2018-08-21T00:10:00.345-04:00"
        },
        {
          "observationTime": "2018-08-21T00:30:00.345-04:00",
          "price": null,
          "sourceModelName": "AQR_RTR_FX",
          "clientObservationTime": "2018-08-21T00:30:00.345-04:00"
        },
        {
          "observationTime": "2018-08-21T00:55:00.345-04:00",
          "price": null,
          "sourceModelName": "AQR_RTR_FX",
          "clientObservationTime": "2018-08-21T00:55:00.345-04:00"
        },
        {
          "observationTime": "2018-08-21T01:10:00.345-04:00",
          "price": 1.3489726167017735,
          "sourceModelName": "AQR_RTR_FX",
          "clientObservationTime": "2018-08-21T01:10:00.345-04:00"
        },
        {
          "observationTime": "2018-08-21T01:30:00.345-04:00",
          "price": 1.3689726167017735,
          "sourceModelName": "AQR_RTR_FX",
          "clientObservationTime": "2018-08-21T01:30:00.345-04:00"
        },
        {
          "observationTime": "2018-08-21T01:55:00.345-04:00",
          "price": 1.3989726167017735,
          "sourceModelName": "AQR_RTR_FX",
          "clientObservationTime": "2018-08-21T01:55:00.345-04:00"
        }];


      ngOnInit(): void {

        this.modelNames = this.unique( this.details, 'sourceModelName' );
        let finalObject = Array<ChartModel>();

        this.modelNames.map( m => {
          var filtered = this.details.filter( c => c.sourceModelName == m );

          var data = filtered.map( f => f.price );
          finalObject.push( { data: data, label: m } );
        } );

        this.chartLabels = this.unique( this.details, 'clientObservationTime' ).sort();// this.details.map( x => x.clientObservationTime )//;.sort();

        this.chartData = finalObject;
      }

      unique( arr, prop ): Array<any> {
        return arr.map( function ( e ) { return e[prop]; } ).filter( function ( e, i, a ) {
          return i === a.indexOf( e );
        } );
      }
    }


    export class ChartModel {
      data: Array<any>;
      label: string;

    }