Anychart - Stock - Проблема с правильным отображением даты

У меня проблема с правильным отображением даты и времени с использованием AnyChart (биржевой график) в Angular.

Иногда AnyChart показывает время правильно, а иногда нет - не могу понять от чего это зависит.

Неправильный формат даты и времени: «05 28 марта 2019 года» с тем же кодом: 28 марта 2019 года, 05:00.

Я уже пытался использовать дату со временем как строку, как дату и как временную метку.

Иногда нормально с размером тика меньше 500. Иногда не работает даже с парой тиков.

Иногда это работает, когда я увеличиваю график.

Пример кода:

draw(tickData: TickData, tickForChart: any[], container: ElementRef) {
  const table = AnyCharts.data.table();
  table.addData(tickForChart);

  const mapping = table.mapAs({
    x: 0,
    open: 1,
    high: 2,
    low: 3,
    close: 4
  });

  const chart = AnyCharts.stock();

  const prices = chart.plot(0).candlestick(mapping);
  prices.name(tickData.market.marketName);
  prices.risingStroke('#3ba158');
  prices.risingFill('#3ba158');
  prices.fallingStroke('#fa1a20');
  prices.fallingFill('#fa0f16');

  chart.plot(0).xGrid().enabled(true);
  chart.plot(0).yGrid().enabled(true);
  chart.plot(0).yGrid().stroke("#dee2e6");

  chart.title(this.getMarketName(tickData));
  chart.container(container.nativeElement);
  chart.scroller(true);
  chart.draw();
  container.nativeElement.style.height = '600px';
  return chart;
}

У кого-нибудь была такая же проблема? Как я могу это исправить?

Кроме того, я прикрепил изображение с неправильным форматированием.

неправильное форматирование

И с правильным:

Правильное форматирование

Например, он хорошо работает с данными:

['2019-03-28T05:00:00', 511.53, 514.98, 505.79, 506.40],
['2019-03-28T05:30:00', 512.53, 514.88, 505.69, 510.34],
['2019-03-28T06:00:00', 511.83, 514.98, 505.59, 507.23],
['2019-03-28T06:30:00', 511.22, 515.30, 505.49, 506.47],
...

но не удалось с данными:

 ['2015-12-24T08:13:00', 511.53, 514.98, 505.79, 506.40],
 ['2015-12-24T09:13:00', 512.53, 514.88, 505.69, 510.34],
 ['2015-12-24T10:13:00', 511.83, 514.98, 505.59, 507.23],
 ['2015-12-24T11:13:00', 511.22, 515.30, 505.49, 506.47]
 ...

Предоставьте фрагмент кода, чтобы было проще устранять неполадки.

Flightdoc5242 28.03.2019 23:56

Я добавил пример кода и изображения.

Dmitry 29.03.2019 23:04
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
2
492
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Применяете ли вы какие-либо настройки форматирования для меток? Пожалуйста, предоставьте нам код, чтобы мы могли его просмотреть. В любом случае проблема решается настройками форматирования. Например, вы можете использовать следующие строки для форматирования меток xAxis:

this.chart.plot(0).xAxis().labels().format('{%tickValue}{dateTimeFormat:dd MMM yyyy hh:mm}');
this.chart.plot(0).xAxis().minorLabels().format('{%tickValue}{dateTimeFormat:dd MMM yyyy hh:mm}');

Спасибо за ответ. Но, к сожалению, у меня это не работает. У меня все еще тот же результат. Я только что добавил пример кода и изображения для более точного описания в сообщение темы. Да, я пробовал использовать другое форматирование, но результат тот же.

Dmitry 29.03.2019 23:01

Я столкнулся с той же проблемой на игровой площадке площадка.anychart.com/docs/v8/samples/STOCK_Data_01, когда заменил некоторую дату датой и временем. Например, замена первого значения в массиве данных (2015-12-24 на 2015-12-24T23:13:00) воспроизведет мою проблему. Кроме того, я проверил все входящие данные - все они корректны и хорошо отформатированы из бэкенда.

Dmitry 29.03.2019 23:08

Спасибо за скриншоты! Теперь я вижу, что мы не правильно вас поняли в начале, проблема связана с названием всплывающей подсказки. Вы можете решить это, используя функцию titleFormat. Просто добавьте следующую строку в свой код chart.tooltip().titleFormat('{%x}{dateTimeFormat:dd MMM yyyy HH:mm}');. Как показано в следующем примере — площадка.anychart.com/5QrPgf3D

AnyChart Support 03.04.2019 05:00
Ответ принят как подходящий

Это происходит потому, что вы устанавливаете даты в разных форматах. Если вы хотите отображать не только дату, но и время, вы должны сделать так, чтобы все значения x имели часы, минуты и т. д. Пожалуйста, проверьте этот образец.

Я всегда устанавливаю данные с одним и тем же форматом даты и времени. Даже когда в данных есть только часы, у меня есть минуты и секунды с нулевыми значениями. Как я показал в сообщении темы, я использовал один и тот же формат для двух наборов данных, и у меня был другой результат. Хотя на вашем примере я заметил, что иногда на графике вообще нет времени, а иногда снова появляется неправильное форматирование. Пожалуйста, попробуйте добавить в выборку два значения в начале: ['2015-12-24T08:13:00', 511.53, 514.98, 505.79, 506.40], ['2015-12-24T09:13:00', 512.53 , 514,88, 505,69, 510,34]

Dmitry 31.03.2019 21:08

да, Дмитрий, это поведение по умолчанию. Формат выбирается в зависимости от интервала между заданными точками. И этот интервал рассчитывается автоматически. Здесь мы получили «full_year_hour»: «ЧЧ дд МММ гггг». Но мы можем отформатировать даты в заголовке всплывающей подсказки следующим образом: anychart.format.outputDateTimeFormat('dd MMM yyyy HH:mm:ss'); tooltip.titleFormat(function () { return anychart.format.dateTime(this.x) }); Посмотрите образец здесь: площадка.anychart.com/tHNaoDAh Узнайте больше о форматировании: api.anychart.com/anychart.format#outputDateTimeFormat

AnyChart Support 01.04.2019 10:40

Совет с tooltip.titleFormat действительно полезен! Большое спасибо!

Dmitry 02.04.2019 20:36

Другие вопросы по теме