我有一个 vue 组件,它实现了 vue-chartjs 的 HorizontalBar 组件,我将其渲染为 bootstrap-vue 表中的单元格。我的愿望是让图表保持固定的高度,但随着窗口的增大/缩小而水平缩放。
当页面首次加载时,图表播放得很好,但在调整大小以覆盖页面上的其他元素时,图表会不受控制地增长。
我怎样才能让他们做出正确的反应而不让他们去不该去的地方?我还想确保它们实际上占据了它们所在的表格单元格的范围,而不是奇怪地停止了几个像素。
这是我的相关组件代码:
<script>
import { HorizontalBar } from "vue-chartjs";
import Constants from "../../services/Constants";
export default {
name: "ResponseGraph",
extends: HorizontalBar,
props: { /* some props */ },
data: () => ({
chartData: {},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{ stacked: true, display: false }],
yAxes: [{ stacked: true, display: false }]
},
legend: {
display: false
},
tooltips: {
enabled: false
}
}
}),
mounted() {
this.chartData = {
datasets: [
// some data
]
};
this.renderChart(this.chartData, this.options);
}
};
</script>
以及我如何在表代码中使用它:
<template v-slot:cell(graph)="data">
<response-graph
:correct="data.item.correct"
:incorrect="data.item.incorrect"
:omitted="data.item.omitted"
:height="20"
/>
</template>