Chart.js，增加图表宽度时增加条形及其标签之间的空间答案

【问题标题】：Chart.js, increase space between bars and its labels when increasing the charts widthChart.js，增加图表宽度时增加条形及其标签之间的空间
【发布时间】：2020-05-01 06:01:53
【问题描述】：

我目前正在测试 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 以适应（水平）。

但如果我将宽度从 400 像素增加到 800 像素，我会得到：

因此，它会放大所有内容的纵横比，从而导致图像模糊。有没有办法增加图表的宽度，然后导致条形之间的空间增加，但保持文本、条形等的纵横比相同？

我基本上只是希望一切都像上图一样。只需将宽度加倍而不影响元素的纵横比。将宽度加倍应该只是将条形及其标签之间的空间加倍，这将有助于我横向适应较长的文本。

【问题讨论】：

标签： angular chart.js

【解决方案1】：

为避免对增加的图表产生模糊效果，您可以定义以下选项。

maintainAspectRatio: false

在单个数据集上定义 categoryPercentage 决定了每个类别可能占用多少空间。这样，您将更改条形之间的空间。

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

如有必要，您可能还想更改刻度旋转。

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

见我的StackBlitz

【讨论】：