javascript - 图表未居中

Question

当我的图表没有加载任何数据时，它完全居中并包含在它的元素中，但是当图表有数据时，图表会被推到右边并变小

我的图表选项:

options: {
    responsive: false,
    maintainAspectRatio: false,
    barRoundness: 1,
    scaleShowValues: true,
    scales: {
      xAxes: [
        {
          barThickness: 6,
          stacked: true,
          ticks: {
            autoSkip: false,
            fontSize: 9
          },
          gridLines: { display: false }
        }
      ],
      yAxes: [{ stacked: false, gridLines: { display: false } }]
    },
    legend: {
      display: false
    },
    tooltips: {
      enabled: false
    }
  }

我在哪里实现它:

<div v-if="loadedMatch" class="graph mt-2 rounded">
    <newgraph :width="327" :height="312" :bets="this.betsForMatch"
    v-if="loadedBets"
    v-on:barInteracted="onBarInteracted"/>
</div>

我想让图表填满整个空白区域

我正在使用 Chart.js 的 vue-chart.js 版本。抱歉，如果我从一开始就没有提供足够的信息。

Answer 1

正是 x 轴刻度的标签使图表向左移动。所以我需要调整 x 轴刻度