Dygraph 不会显示在 Bootstrap 卡片中

Question

我想在 Bootstrap 卡片正文的第二列中创建一个 dygraph 图（它看起来漂亮干净）。 dygraph使用的div是graphdiv。我正在使用 this.$refs.graphdiv 尝试从我的 vue 脚本中访问它。

如果我将 graphdiv <div> 移到卡片 div 之外，它就会起作用（请参阅评论）。为什么 dygraph 在 bootstrap 卡中不起作用？这只是必须向开发人员记录并等待修复的兼容性问题之一吗？

<template>
<div>
     <div class="card">
        <div class="card-header">HEADER</div>
        <div class="card-body">
          <div class="row">
            <div class="col-sm-3" style="width: 100%">
            </div>

            <div class="col-sm-9">
                  <div id="graphdiv" style="width: 100%" ref="graphdiv"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--Comment: IF I PLACE IT HERE IT WORKS -->
</div>
</template>

这是脚本的简化版本：

<script>
import Dygraph from "dygraphs";
export default {
methods:{
    plot_chart_series() {
      //dataset = my data that I want to plot
      const g = new Dygraph(this.$refs.graphdiv, dataset, {//options});

    }
}
};
<script>

P.S.

我使用 dygraph 的原因是我想绘制一个相当大的数据集（+-30000 个数据点），chart.js 而 Apexchart 无法管理（我花了 3 个小时的大部分时间试图获得他们工作）。如果我的上述问题没有解决，还有哪些图形库是 Vue 友好的，可以处理大型数据集？

Answer 1

解决方法

我已经设法找到解决方法，我至少可以相对缩小问题的范围并说我不认为它是 bootstrap。

    <div class="card" ref="carder">
      <div class="card-header">Graph</div>
      <div class="card-body">
        <div class="row">
          <div class="col-sm-3">
            <button>A_BUTTON</button>
          </div>
          <div class="col-sm-9">
            <div ref="graphdiv" style="width: 100%"></div>
          </div>
        </div>
      </div>
    </div>

上面的代码片段对我有用。

对原来的改动：

我删除了父级 div 中的 id="some_id" 属性。
整张卡片都包裹在另一个 div 中。这个 div 有一个 ref="some_ref" 属性，我从 Vue 脚本中使用它来切换可见性。我用 this.$refs.some_ref.style.display = "block"; & this.$refs.some_ref.style.display = "none"; 做了这个。我把它改成了下面的this.$refs.some_ref.style.visibility = "hidden";，只是在我想出示卡片的时候把hidden改成了visible。（我不介意隐藏元素仍然消耗space）

如果我将上面的第 2 个更改还原为原始更改，则它无法显示。我仍然无法解释它，但它有效。

Dygraph 不会显示在 Bootstrap 卡片中

Dygraph will not display in Bootstrap card

javascript

dygraphs

laravel

twitter-bootstrap-3

P.S.

解决方法

对原来的改动：