问题描述
我正在加载kendo vue ui图表，并将其显示在引导卡中（位于引导标签中）。
但是由于某些原因，这些图表并未覆盖卡片的整个宽度，并且呈现的非常小。
图表的SVG中已经存在样式：width: 100%; height: 100%;，但不会扩展。
但是，当我更改代码内容并且浏览器刷新dom时，只有它占据了整个宽度。但是，在刷新或按f5键之后，它将再次相同。
我也尝试过使用道具：chart-area="chartArea"，并设置宽度。会扩展图表，但不会根据窗口宽度的减小而调整大小。
为什么最初不能正确渲染？造成此问题的原因是什么？可能的解决方法是什么？
new Vue({
el: "#vueapp",data: function() {
return {
series: [{
name: "Gold Medals",data: [40,32,34,36,45,33,83,37,44,35,46],color: "#f3ac32"
},{
name: "Silver Medals",data: [19,25,21,26,28,31,60,24,40,38,29],color: "#b8b8b8"
},{
name: "bronze Medals",data: [17,17,16,30,27,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>更新：
这显然是引导程序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处于非活动状态或以任何一种方式处于活动状态的情况下使图表宽度为 .tab-content>.tab-pane:not(.active),.pill-content>.pill-pane:not(.active) {
display: block;
height: 0;
overflow-y: hidden;
}
的值。
添加以下CSS似乎也不起作用：
Dim a as New Integer(){0,1,2,3,4,5,6}
Dim a2 as Integer() = (New ArraySlicer(a)).skip(2).take(3).arr())
a2 = [2,4]
解决方法
通过在组件上设置惰性道具，效果很好。
此处提供示例：
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>