相当简单，但是我想单独显示条形图上的一个条形。我已经隐藏了轴和它们的刻度，但是在图表的左侧和顶部//底部仍然有所有的空间，我假设这些空间来自轴和图例。有没有办法在不给元素添加负边距的情况下删除这些空间？
我试过使用负填充，但在图表的顶部和底部不起作用。
我做了一个快速的CodeSandbox来显示我的实际组件
如有任何提示，我们将不胜感激！
干杯干杯干杯

水平堆积条形图

<template>
  <div style="width: 100%; height: 100%">
    <canvas :id="id" width="100%" height="100%"></canvas>
  </div>
</template>
<script>
import { defineComponent, onMounted } from "vue"
import Chart from "chart.js/auto"
import ChartDataLabels from "chartjs-plugin-datalabels"

export default defineComponent({
  props: {
    kind: {
      /**
       * @example: 'single', 'stacked'
       */
      type: String,
      default: "stacked",
    },
    color: {
      type: String,
      default: "rgba(255, 99, 132, 1)",
    },
    labels: {
      type: Array,
      default: () => ["S1", "S2", "S4", "S6"],
    },
    datasets: {
      type: Array,
      default: () => [
        {
          label: "va_value",
          data: [80, 10, 60, 50],
          backgroundColor: "#11DCB5",
          borderColor: "transparent",
          barThickness: 20,
          minBarLength: 4,
          // This is here to show SOMETHING even if the value is 0
        },
        {
          label: "nva_value",
          data: [20, 0, 40, 0],
          backgroundColor: "#CA2F4B",
          borderColor: "transparent",
          barThickness: 20,
          minBarLength: 4,
        },
      ],
    },
  },
  setup(props, context) {
    const id = Math.random().toString()
    onMounted(() => {
      Chart.register(ChartDataLabels)
      const ctx = document.getElementById(id)
      const myChart = new Chart(ctx, {
        type: "bar",
        data: {
          labels: props.labels,
          datasets: props.datasets,
        },
        options: {
           layout: {
              padding: {
                left: -20,
                bottom: -20,
                top: -20
              }
            },
          plugins: {
            legend: {
              display: false,
            },
            datalabels: {
              formatter: function (value) {
                return props.kind === "stacked" ? `${value}s` : `${value}%`
              },
              color: "#fff",
              anchor: "center",
              align: "center",font: {
                weight: "bold",
              },
            },
          },
          responsive: true,
          maintainAspectRatio: false,
          indexAxis: "y",
          scales: {
            y: {
              beginAtZero: true,
              stacked: true,
              ticks: {
                color: "#fff",
              },
              grid: {
                drawBorder: false,
                display: false,
              },
            },
            x: {
              display: props.kind === "stacked" ? true : false,
              beginAtZero: true,
              stacked: true,
              ticks: {
                color: "#fff",
              },
              grid: {
                drawBorder: false,
                display: false,
              },
              title: {
                display: true,
                text: props.kind === "stacked" ? "Step Time (s)" : "",
                color: "#fff",
              },
            },
          },
        },
      })
      myChart
    })
    return { id }
  },
})
</script>
<style lang=""></style>