У меня проблема с правильным отображением даты и времени с использованием 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]
...
Я добавил пример кода и изображения.
Применяете ли вы какие-либо настройки форматирования для меток? Пожалуйста, предоставьте нам код, чтобы мы могли его просмотреть. В любом случае проблема решается настройками форматирования. Например, вы можете использовать следующие строки для форматирования меток 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}');
Спасибо за ответ. Но, к сожалению, у меня это не работает. У меня все еще тот же результат. Я только что добавил пример кода и изображения для более точного описания в сообщение темы. Да, я пробовал использовать другое форматирование, но результат тот же.
Я столкнулся с той же проблемой на игровой площадке площадка.anychart.com/docs/v8/samples/STOCK_Data_01, когда заменил некоторую дату датой и временем. Например, замена первого значения в массиве данных (2015-12-24 на 2015-12-24T23:13:00) воспроизведет мою проблему. Кроме того, я проверил все входящие данные - все они корректны и хорошо отформатированы из бэкенда.
Спасибо за скриншоты! Теперь я вижу, что мы не правильно вас поняли в начале, проблема связана с названием всплывающей подсказки. Вы можете решить это, используя функцию titleFormat. Просто добавьте следующую строку в свой код chart.tooltip().titleFormat('{%x}{dateTimeFormat:dd MMM yyyy HH:mm}');
. Как показано в следующем примере — площадка.anychart.com/5QrPgf3D
Это происходит потому, что вы устанавливаете даты в разных форматах. Если вы хотите отображать не только дату, но и время, вы должны сделать так, чтобы все значения 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]
да, Дмитрий, это поведение по умолчанию. Формат выбирается в зависимости от интервала между заданными точками. И этот интервал рассчитывается автоматически. Здесь мы получили «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
Совет с tooltip.titleFormat действительно полезен! Большое спасибо!
Предоставьте фрагмент кода, чтобы было проще устранять неполадки.