Vuetify 2 Sparkline长X轴适配：固定高度并添加横向滚动条

核心问题 #

Vuetify的v-sparkline默认采用SVG viewBox等比例缩放机制，直接调整父容器宽度会触发整体等比例放大，导致图表高度同步增加、线条变粗。要实现宽幅但高度固定的效果，需要打破这种默认缩放逻辑。

解决步骤 #

1. 强制固定Sparkline高度并解除等比例缩放
   给v-sparkline设置固定高度，同时通过CSS修改内部SVG的preserveAspectRatio属性，让SVG不再保持原始宽高比，支持独立设置宽高。

2. 搭建正确的滚动容器结构
   外层容器开启横向滚动(overflow-x: auto)，并限制其最大宽度为父容器宽度；内部Sheet无需固定宽度，随Sparkline的宽幅自动撑开。

修改后的完整代码 #

<div id="app">
  <v-app id="inspire">
    <!-- 横向滚动容器：限制最大宽度，仅横向溢出滚动 -->
    <div style="overflow-x: auto; max-width: 100%;">
      <v-sheet>
        <v-sparkline
          :value="value"
          line-width="1"
          height="80" <!-- 固定图表高度 -->
          class="sparkline-custom"
          <!-- 可选：根据数据点数量动态计算宽度 -->
          :style="{ width: `${value.length * 16}px` }"
        ></v-sparkline>
      </v-sheet>
    </div>
  </v-app>
</div>

<style>
.sparkline-custom svg {
  /* 关键：取消SVG等比例缩放 */
  preserveAspectRatio: none !important;
  /* 强制SVG使用设置的宽高 */
  width: 100% !important;
  height: 100% !important;
}
</style>

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0, 0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0, 0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0, 0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
  }),
})
</script>

关键细节说明 #

• preserveAspectRatio: none：彻底解除SVG的等比例缩放逻辑，是解决高度同步变化的核心
• 动态宽度计算：通过value.length * 16给每个数据点分配固定宽度，适配不同数据量的需求
• 外层容器max-width: 100%：确保滚动容器不会超出页面宽度，仅在内容过宽时触发横向滚动
• 固定line-width="1"：由于SVG不再缩放，线条粗细不会随宽度变化而被拉伸变粗

内容的提问来源于stack exchange，提问作者hobbes_child