Question

我有一个页面，其中包含多个使用chartjs绘制的图表。问题是，当我在被v-if或v-show隐藏的div内绘制图表时，当条件发生变化并且出现了隐藏的div时，图表将不会出现。有没有办法做到这一点。我尝试使用update，但这不起作用。图表仅在未隐藏相关div时创建时显示。

Answer 1

我建议将图表的init函数置于相同的方法中，或者将其设置为观察者方法，例如负责显示/隐藏元素的方法。

赞：

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

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

在说可以设置观察者时，几乎是同一回事，但独立于可见对象设置为true。

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

Answer 2

如果尚未安装，请尝试使用vue-chartjs。它将处理vue动态数据的所有布线。

Answer 3

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

更改布尔值showChart时，整个外部div内容将重新呈现或销毁。如果再次渲染销毁的div，则当showChart的时间变为true时，也需要初始化图表。

Answer 4

我也遇到了vue-chartjs的问题。对我有用的是改为使用v-show。

我以前在v-else中使用的块，我知道放了一个新的v-if块

<div v-show="visualizationData">
    <myChart :chartData="visualizationData" :height="350" />
</div>

<div v-if="visualizationData === null">
    <div class="loadingIndicator">
		    Loading...
		</div>
</div>

Chartjs（Non Vue）未在V-if / V-show中渲染图形图表

4 个答案: