Question

我有两个div，每个div包含一个画布。在初始状态下，仅显示一个，另一个显示为无。在第一个画布上单击后，将执行以下代码：

$("#graph1").click(function(){
    if(!$("#graphTwo").hasClass("toggled")) {
        $("#graphTwo").animate({"height": "350px"}).removeClass("toggled");
        $("#graphTwo").animate({"width": "700px"});
    } else {
        $("#graphTwo").animate({"height": "0px"}).addClass("toggled");
        $("#graphTwo").animate({"width": "0px"});
    }
});

动画按预期方式工作，但不显示画布。仅在调整视口大小后才会显示。为什么会这样，我该如何解决？

我正在使用chart.js。

Answer 1

当Mongoose: countries.insertOne({ _id: ObjectId("5f678480f9bbc526785bac23"), __v: 0 }, { session: null }) countries { _id: 5f678480f9bbc526785bac23, __v: 0 }可见时，您可以尝试调用图表.update() see docs on updates。（因为这就是您调整视口大小->更新图表时发生的情况）

#graphTwo

但是您应该小心此from the Responsive page docs通知：

重要提示：无法检测何时更改画布大小直接来自canvas元素。 Chart.js使用其父容器更新画布的渲染和显示尺寸。

我认为，如果父级不可见，则将启动或更新图表，那么以后渲染图表可能会遇到问题。因此，也许最安全的方法是在动画结束后更新图表。

...
if(!$("#graphTwo").hasClass("toggled")) {
  $("#graphTwo").animate({"height": "350px"}).removeClass("toggled");
  $("#graphTwo").animate({"width": "700px"});
  /** add chart update here **/
  the_chart_2.update(); // --> put the Chart instance
}
...

这有所作为吗？

在不调整视口大小的情况下，动画后无法渲染画布

1 个答案: