Chart.js，增加圖表寬度時增加條形與其標簽之間的空間

Question

我目前正在測試 ChartType bar Chart.js。

這就是我定義測試畫布的方式：

<div class="bar-chart">
  <canvas
    baseChart
    [datasets]="[{label: 'Testuser1', data: [0, 15, 0, 0]}, {label: 'Testuser2', data: [10, 0, 10, 0]}, {label: 'Testuser3', data: [15, 0, 0, 12]}]"
    [labels]="['Junior Softwaredeveloper', 'Senior Softwaredeveloper', 'Designer']" [chartType]="barChartType"
    [options]="options">
  </canvas>
</div>

我使用的選項：

export const CHARTOPTIONS_BAR = {
  legend: {display: false},
  animation: null,
  tooltips: {
    callbacks: {
      label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ': ' + data.datasets[tooltipItems.datasetIndex].data[0] + 'h'
    },
  },
  plugins: {
    colorschemes: {
      scheme: 'tableau.SuperfishelStone10',
      override: true
    }
  },
  scales: {
    xAxes: [{
      stacked: true,
    }],
    yAxes: [{
      stacked: true,
      scaleLabel: {
        display: true,
        labelString: 'Stunden',
        fontSize: 18
      }
    }]
  },
  responsive: true
};

而父類只是定義了畫布響應適應的寬度和高度：

.bar-chart {
  width: 400px;
  height: 200px;
}

這就是它的樣子：

我想增加圖表的寬度，以便有足夠的空間容納像Junior Softwaredeveloper這樣的較長文本（水平）。

但是如果我將寬度從 400px 增加到 800px 我得到這個：

因此，它會放大所有內容的縱橫比，從而導致圖像模糊。 有沒有辦法增加圖表的寬度，然后導致條形之間的空間增加，但保持文本、條形等的縱橫比相同？

我基本上只是希望一切都像上圖一樣。 只需將寬度加倍，而不會影響元素的縱橫比。 將寬度加倍應該只是將條形與其標簽之間的空間加倍，這將有助於我水平放置較長的文本。

Answer 1

為避免增加圖表的模糊效果，您可以定義以下選項。

maintainAspectRatio: false

在單個數據集上定義categoryPercentage確定每個類別可能占用多少空間。 這樣你就可以改變條形之間的空間。

{ 
  categoryPercentage: categoryPct,
  label: 'Testuser1', 
  data: [0, 15, 0, 0]
} 

如有必要，您可能還想更改刻度旋轉。

xAxes: [{
  stacked: true,
  ticks: {
    minRotation: 20
  }
}],

查看我的StackBlitz