Chartjs (Non Vue) Non-Rendering Graph Chart внутри V-if / V-show

Question

У меня есть страница, содержащая несколько графиков, нарисованных с использованием chartjs. Проблема в том, что когда я рисую диаграмму внутри элемента div, когда он скрыт с помощью v-if или v-show, диаграмма не будет отображаться при изменении условия и появлении скрытого элемента div. Есть ли способ сделать это. Я пытался использовать update, но это не работает. Диаграмма появляется только в том случае, если она создана в то время, когда соответствующий div не скрыт.

Answer 1

Если вы этого еще не сделали, попробуйте использовать vue-chartjs .Он будет обрабатывать всю проводку для динамических данных.

Answer 2

<div v-if="showChart"> <div id="chartWrapper"></div> </div>

При изменении логического значения showChart весь внешний контент div перерисовывается или уничтожается.Если уничтожено div, рендеринг снова, вам нужно также initChart, когда время showChart становится true.

Answer 3

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

Как:

   <div v-if="visible">
     <div ref="chartContainer"></div>
   </div>

   .....
   methodThatChangesVisibility () {
     this.visible = true
     this.initChartMethod()
   }

Когда вы говорите, что вы можете настроить наблюдателя, это почти то же самое, но независимо от видимого устанавливается значение true.

  watch: {
    visible: function (visible) {
      if (visible) this.initChartMethod()
    }
  }