Kendo 图表未覆盖选项卡内 bootstrap 卡片上的整个宽度

Question

我正在加载 kendo vue ui 图表并将其显示在 bootstrap 卡片中（在 bootstrap 选项卡内）。

但由于某种原因，图表没有覆盖卡片的整个宽度，而且渲染得非常小。

图表的 SVG 中已经有如下样式：width: 100%; height: 100%;，但不会展开。

但是当我更改代码并且浏览器刷新 dom 时，只有它占据了整个宽度。但是，在刷新或 f5 按键之后，它将再次相同。

我也尝试过使用道具：chart-area="chartArea"，并设置宽度。扩展图表但不调整大小 window 宽度减少。

为什么最初渲染不正确？导致此问题的原因是什么？可能的解决方法是什么？

new Vue({
  el: "#vueapp",
  data: function() {
    return {
      series: [{
        name: "Gold Medals",
        data: [40, 32, 34, 36, 45, 33, 34, 83, 36, 37, 44, 37, 35, 36, 46],
        color: "#f3ac32"
      }, {
        name: "Silver Medals",
        data: [19, 25, 21, 26, 28, 31, 35, 60, 31, 34, 32, 24, 40, 38, 29],
        color: "#b8b8b8"
      }, {
        name: "Bronze Medals",
        data: [17, 17, 16, 28, 34, 30, 25, 30, 27, 37, 25, 33, 26, 36, 29],
        color: "#bb6e36"
      }],
      valueAxis: [{
        max: 180,
        line: {
          visible: false
        },
        minorGridLines: {
          visible: false
        }
      }],
      categoryAxis: {
        categories: [1952, 1956, 1960, 1964, 1968, 1972, 1976, 1984, 1988, 1992, 1996, 2000, 2004, 2008, 2012],
        majorGridLines: {
          visible: false
        }
      },
      tooltip: {
        visible: true,
        template: "#= series.name #: #= value #"
      }
    }
  }
})

<!--Load Kendo styles from the Kendo CDN service-->
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.default.min.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />

<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css" />

<!--Load the required libraries - jQuery, Kendo, Babel and Vue-->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<!--Load the required Kendo Vue package(s)-->
<script src="https://unpkg.com/@progress/kendo-charts-vue-wrapper/dist/cdn/kendo-charts-vue-wrapper.js"></script>


<div id="vueapp" class="vue-app">
  <div class="container py-2">
    <div class="row">
      <div class=col-md-4>
        <b-card title="Card Title" img-src="https://picsum.photos/600/300/?image=25" img-alt="Image" img-top tag="article" style="max-width: 20rem;" class="mb-2">
          <b-card-text>
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </b-card-text>

          <b-button href="#" variant="primary">Go somewhere</b-button>
        </b-card>

      </div>
      <div class="col-md-8">
        <b-tabs content-class="mt-3">
          <b-tab title="First" active>
            <p>I'm the first tab</p>
          </b-tab>
          <b-tab title="Olypic Medals won by USA">
            <div class="card">
              <div class="card-body">
                <kendo-chart :title-text="'Olympic Medals won by USA'" :legend-visible="false" :series-defaults-stack="true" :series-defaults-type="'bar'" :series="series" :category-axis="categoryAxis" :value-axis="valueAxis" :tooltip="tooltip" :theme="'sass'">
                </kendo-chart>
              </div>
            </div>
          </b-tab>
        </b-tabs>
      </div>
    </div>
  </div>
</div>

更新:

这显然是 bootstrap、Why are Bootstrap tabs displaying tab-pane divs with incorrect widths when using highcharts?

的问题

但我不确定如何解决这个问题。图表的全宽仅在时显示：<b-tab> is active.

演示：https://stackblitz.com/edit/dnnvoa-2op3gm?file=index.html

现在，如何使图表宽度为 cards 的 100%，当它未处于活动状态或以任何方式处于活动状态时。

添加以下 css 似乎也不起作用：

  .tab-content>.tab-pane:not(.active),
        .pill-content>.pill-pane:not(.active) {
            display: block;
            height: 0;
            overflow-y: hidden;
        }

Answer 1

通过在组件上设置 lazy 属性，效果非常好。

此处提供示例：

https://bootstrap-vue.org/docs/components/tabs#tabs

<b-tabs content-class="mt-3">
  <!-- This tabs content will always be mounted -->
  <b-tab title="Regular tab"><b-alert show>I'm always mounted</b-alert></b-tab>

  <!-- This tabs content will not be mounted until the tab is shown -->
  <!-- and will be un-mounted when hidden -->
  <b-tab title="Lazy tab" lazy><b-alert show>I'm lazy mounted!</b-alert></b-tab>
</b-tabs>

Kendo 图表未覆盖选项卡内 bootstrap 卡片上的整个宽度

Kendo chart not covering the full width on the bootstrap card which is inside the tab

css

kendo-ui

bootstrap-4

kendo-ui-vue

bootstrap-vue