responsive-design - 图表绘制中的响应不正确

Question

我用Chartist库创建了一个简单的折线图，但我让它正确显示。有趣的是，SVG 元素正确地占据了 100% 的宽度，并且 CSS 类也施加了正确的纵横比（也就是高度）。然而，除此之外，这幅画本身都卡在了错误的空间里。

看看它应该是什么样子：

我用 JS 代码和 SVG 创建了一个 GIST：gist。

毫无疑问，使事情复杂化的是，我正在流行的Vuetify UI 框架中工作，特别是在扩展面板组件中工作，该组件使用display: none.

我希望的是一种方法来让这个正确响应，但是，如果我必须，我愿意强制浏览器重新评估页面（或只是这个部分）。我真的不确定 SVG/CSS/Browser 大小调整是什么导致了整体效果，但为了尝试手动重新评估，我确实尝试添加以下代码：

public mounted() {
  this.$el.getBoundingClientRect(); // (1) trying to force browser to re-eval
  this.$nextTick(() => {
    this.chart(); // (2) waiting for render before adding the chart
  });
}

不幸的是，这些绝望的两周没有奏效。

标签： responsive-designvuetify.jschartist.js