Нельзя иметь два одновременных графика с использованием Apex Charts.

Вопрос или проблема

Моя проблема довольно проста: у меня есть HTML-блок кода с AJAX-запросом, который строит отличный график с использованием Apex Charts. Когда я дублирую этот HTML-блок, один из графиков не отображается, только первый.

Я пробовал использовать разные ссылки для двух AJAX-вызовов, но это все равно не сработало. При проверке результатов в консоли информация о втором вызове не отображается.

Я довольно новичок в WP и JS, поэтому беспокоюсь, что это ожидаемое поведение и я просто трачу время. Спасибо за любую помощь!

Редактировать: оба вызова все-таки отображаются в консоли. Но график не показывается.

У меня была похожая проблема. У меня было два графика на одной HTML-странице. В JS у меня было две переменные с опциями.

Когда я использовал секцию ‘responsive’ в опциях каждого графика, второй график не отображался, и в консоли была ошибка ‘Maximum call stack size exceeded’.

В моем случае помогло удаление полей id из опций обоих графиков.

До:

var options1 = {
  chart: {
    id: 'graph1',
    type: 'bar',
    ...

var options2 = {
  chart: {
    id: 'graph2',
    type: 'bar',
    ...

После:

var options1 = {
  chart: {
    type: 'bar',
    ...

var options2 = {
  chart: {
    type: 'bar',
    ...

Это все равно странно, и это должно быть какой-то баг в Apex Charts (я использовал версию 3.49).

Ответ или решение

Проблема, с которой вы столкнулись при использовании Apex Charts, типична для работы с графиками на JavaScript, где может возникнуть конфликт между элементами, работающими одновременно на одном HTML-документе. Рассмотрим данную ситуацию: вы создаете графики с помощью AJAX-запросов и Apex Charts, но при дублировании блока HTML отобразить графики не удается. Попробуем разобраться в причинах и предложить возможное решение.

Теория

Когда вы работаете с библиотеками для визуализации данных, таких как Apex Charts, следует учитывать несколько важных моментов:

Уникальность идентификаторов: В Apex Charts использование идентификаторов для графиков может приводить к конфликтам, если используется один и тот же идентификатор для нескольких графиков. Многие разработчики сталкиваются с проблемами, когда для разных графиков назначаются одинаковые id, что может вызвать ошибку в JavaScript и предотвратить отображение графиков.
Опции графиков: Установки и параметры (options) каждого графика играют критическую роль в его отображении. Важно не только правильно настраивать параметры внутри chart, но и избегать избыточных или некорректных параметров, которые могут вызывать ошибки.
Обработка асинхронных запросов: Асинхронная природа AJAX-запросов требует внимательного подхода к обработке полученного результата. Значение, которое возвращается от сервера, должно быть корректно обработано и передано в ваши функции построения графика.

Пример

В вашем случае, как было указано в предыдущем опыте сообщества, удаление идентификаторов (id) из параметров графиков решило проблему, так как это устранило конфликт, вызванный дублированием идентификаторов:

var options1 = {
  chart: {
    type: 'bar',
    ...
};

var options2 = {
  chart: {
    type: 'bar',
    ...
};

Определенно, это может звучать странно, так как идентификаторы обычно применяются для взаимодействия с элементами, но в контексте Apex Charts это может вызвать рекурсивные вызовы, особенно если responsive параметры используют идентификатор для привязки к элементу на странице.

Применение

Вот некоторые шаги, которые можно предпринять для устранения проблемы:

Удалите идентификаторы из параметров chart: Как показано в примере, это может помочь избежать рекурсивных вызовов, связанных с привязками элемента.
Проверьте конфигурацию параметров: Убедитесь, что настройки для каждого графика корректны и не содержат параметров, которые могут вызывать ошибки. Слишком сложные или отсутствующие параметры могут вызвать неправильное поведение.
Резервные проверки на уникальность переменных: Если вы используете глобальные переменные для параметров, убедитесь, что их названия уникальны и не пересекаются с другими скриптами на странице.
Обработка данных после AJAX-запросов: Убедитесь, что результаты ваших AJAX-запросов корректно обрабатываются. Например, данные, полученные от сервера, должны быть переданы непосредственно в ваши графики.
Обновление и тестирование версии: Убедитесь, что вы используете последнюю версию Apex Charts, так как в старых версиях могут присутствовать ошибки, которые уже исправлены в новых релизах.

Надеюсь, эта информация поможет вам решить вашу проблему с отображением графиков Apex Charts. В случае если проблема остается, может потребоваться более детальный анализ кода или помощь сообщества разработчиков, так как индивидуальные конфигурации могут вводить уникальные баги.