Как обновить тип диаграммы ApexCharts

Мне нужно обновить тип диаграммы уже созданного ApexCharts.

Из того, что я посмотрел на методы, я попытался использовать метод updateOptions(), но вернул следующую ошибку: Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined.

У меня тоже есть другой вопрос ... Могу ли я обновить график, не сообщая данные повторно?

Код: https://jsfiddle.net/leorcdias/yzwx6qh4/4/

Моя идея состоит в том, чтобы обновить диаграмму, не переставляя данные заново ...

Я очень надеюсь, что кто-нибудь сможет мне помочь! Спасибо..


person Leonardo Dias    schedule 19.09.2019    source источник


Ответы (1)


Я пробовал использовать updateOptions({type: 'selectedType'}), но это не дало результата.

Впрочем, updateSeries() способ спасти мне жизнь :) Я использую его только для смены типа графика. Для изменения всех остальных параметров я использую updateOptions.

Всего у меня такой код:

chart.updateSeries([{type: 'MyType'}]); 
chart.updateOptions({every: other, options: you, want: toChange}});

ИЗМЕНИТЬ

Извините, но весь мой текст выше не имеет смысла!

Итак, у вас есть 2 вопроса.

  1. Uncaught TypeError: Cannot read property 'querySelectorAll' of undefined

Вы можете вызывать метод updateOptions (как и другие методы API) только для экземпляров ApexCharts, которые должны быть созданы только один раз. В вашем случае таким экземпляром является var chart. Но есть проблемы: 1) вы пытаетесь создать его несколько раз (перед начальным рендерингом и перед обновлением), 2) этот экземпляр каждый раз находится в локальной области видимости!

2)

Могу ли я обновить диаграмму, не сообщая данные повторно?

data - это массив series. Структура ряда зависит от типа диаграммы. В случае пирога это просто массив числовых значений. В случае bar, line, area - это массив объектов. См. Документы / Типы диаграмм и Документы / Демонстрации. Итак, если вы хотите изменить тип диаграммы на другой с другой структурой рядов, преобразуйте структуру ряда раньше! В других случаях обновление действительно просто, например:

chart.updateOptions({legend:{show:false}, stroke: {width:8}});

Я переписал ваш код с минимумом, проверьте его: https://jsfiddle.net/kvipe/7sxLrz54/7/, рады помочь!

person kvipe    schedule 01.02.2020
comment
@vsync ты абсолютно прав! Я имею в виду, конечно, updateOptions метод. Починил это. - person kvipe; 22.02.2021