Ngx-чарты мультисерийный линейный график

Question

Я пытаюсь создать многострочную линейную диаграмму в angular с помощью модуля Ngx-chart, но в настоящее время нахожусь в состоянии покоя со следующей проблемой:

При отправке данных в формате Date () в виде " name "(ось X), данные предварительно отформатированы в (нелокализованную) строку UT C. Предварительное форматирование переопределяет (необязательное) поле ввода [xAxisTickFormatting]. Ниже показано, как выглядит мой график:

Я попытался создать пользовательскую функцию xAxisTickFormatting - она ​​все еще не работает, ниже функция.

tickFormatting(value): string {
    console.log(value);
    const date = new Date(value);
    const newDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);

    const offset = date.getTimezoneOffset() / 60;
    const hours = date.getHours();

    newDate.setHours(hours - offset);

    return newDate.toLocaleString();
  }


</ngx-charts-line-chart
.....
[xAxistickFormatting]="tickFormatting.bind(this)"
>
</ngx-charts-line-chart>

Я получаю данные моего графика из django API . Вот как будут извлекаться данные, для облегчения понимания:

"data": [
        {
            "series": [
                {
                    "name": "2020-02-06T09:32:45.782Z",
                    "value": 1.0
                },
                {
                    "name": "2020-02-06T09:34:52.094Z",
                    "value": 0.0
                },
                {
                    "name": "2020-01-27T08:08:10.395Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-27T08:54:49.915Z",
                    "value": 0.0
                },
                {
                    "name": "2020-01-27T11:47:04.054Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-20T13:53:08.058Z",
                    "value": 1.0
                },
                {
                    "name": "2020-01-20T13:53:55.327Z",
                    "value": 1.0
                }
            ],
            "name": "Github"
        }
]

Кто-нибудь может помочь в исправлении этой ошибки?

Answer 1

Даты в имени ключа должны быть преобразованы в javascript формат даты, чтобы можно было использовать функцию tickFormatting по умолчанию для дат. Поэтому я создал функцию, которая принимает массив объектов и преобразует все даты в имени значения ключа в javascript объект новой даты. Это функция машинописного текста, которая принимает мой JSON ответ API и преобразует даты в имени значения ключа в javascript новый объект даты

dateConvert(value: []) {
    value.forEach((element: any) => {
      element.series.forEach((item: any) => {
        item.name = new Date(item.name);
      });
    });
  }

Это для тех, кто может столкнуться с той же проблемой