Dygraph: Дата ожидаемой ошибки!при использовании массива в качестве источника данных в проекте Angular 7 - PullRequest
Новая
       19

Dygraph: Дата ожидаемой ошибки!при использовании массива в качестве источника данных в проекте Angular 7

0 голосов
/ 05 марта 2019

Api-проект в ASP 

[Route("api/[controller]")]
    public class SampleDataController : Controller
    {
        ...

        [HttpGet("[action]")]
        public Array GetGraphData()
        {
            var tsData = timeFloatService_.GetLatestDataRecords(4790, DataRecordStatus.Live, DataRecordAbnormal.Normal, 1).Get();
            object[][] result = tsData.Select(x => new object[] { x.Index.ToString("yyyy/MM/dd HH:mm:ss"), x.Value }).Take(10).ToArray();
            return result;
        }

enter image description here

, полученный в вызывающем угловом проекте: 

<code>import { Component, OnInit, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {

  private forecasts: any;

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<any[]>(baseUrl + 'api/SampleData/GetGraphData').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }

<p>
  test works!
</p>
<pre>{{forecasts|json}}

enter image description here

Массив данных получен, но Date является строкой, а не Date (), поэтому диаграмма Dygraph не загружена!

enter image description here

Диаграммы настроены правильно (протестировано с данными CSV).

Даже если я передам дату в качестве даты и времени, она будет преобразованав строку!Поэтому мой вопрос заключается в том, как преобразовать первый элемент каждого массива в Date () внутри проекта Angular.Я не могу найти какую-либо помощь по этому вопросу!

См. Документы: http://dygraphs.com/data.html#array

КОНСТРУКТОР ПОСЛЕ ИЗМЕНЕНИЙ: 

constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
      http.get<any[]>(baseUrl + 'api/SampleData/GetGraphData').subscribe(result => {
        this.forecasts = from(result).pipe(map(item => [new Date(item[0]), item[1]]));
      }, error => console.error(error));

Выше массива изменяется на следующий 

{
  "_isScalar": false,
  "source": {
    "_isScalar": false,
    "array": [
      [
        "2013/01/01 00:00:00",
        58096
      ],
      [
        "2013/01/02 00:00:00",
        50893
      ],

К сожалению, это не сработает!(Если я не сделал ошибку.)

Необходимо изменить строку на Date на странице DOM / Html, так как измененный массив все еще отображал дату в виде строки!

1 Ответ

1 голос
/ 05 марта 2019

Вам необходимо создать объекты даты из строк.Вы можете сделать это, используя rxjs map.

Пример: 

import { from } from 'rxjs';
import { map } from 'rxjs/operators';
// ...
// observable array
const dates = from([
  "2013/01/01 00:00:00",
  "2013/01/02 00:00:00"
]);

dates.pipe(map(ds => new Date(ds))).subscribe(date => console.log(date));

В вашем случае вы бы явно не отображали один объект даты, а массив, состоящий из объекта даты изначение.

РЕДАКТИРОВАТЬ:

Хорошо, вот более полный пример для вашего случая: https://stackblitz.com/edit/angular-jfx4gr

import { of } from 'rxjs';
import { map } from 'rxjs/operators';
// ...
httpGet = of([
    [
      "2013/01/01 00:00:00",
      58096
    ], [
      "2013/01/02 00:00:00",
      50893
    ]
]);

constructor() {
  this.httpGet
    .pipe(map(item => item.map(i => [ new Date(i[0]), i[1] ])))
    .subscribe(result => console.log(result));
}

Или на самом деле вы могли быеще проще, используя array.map в обратном вызове подписки: 

this.httpGet
    .subscribe(result => {
      const converted = result.map(i => [ new Date(i[0]), i[1] ]);
      console.log(converted);
    });
...