【发布时间】：2020-09-08 03:29:54
【问题描述】：
我正在加载 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, 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>更新：
这显然是引导程序的问题，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;
}
【问题讨论】：
标签： css bootstrap-4 kendo-ui bootstrap-vue kendo-ui-vue