Angular 图表 js 条形图宽度不起作用

Question

我正在为我的项目使用 angular 12 和图表 js 最新版本我尝试将条形图宽度设置得小一些，但是 barPercentage: 0.4 无法将任何解决方案添加到我的代码中？

代码在这里

var myChart = new Chart('myChart', {
      type: 'bar',
      data: {
        labels: this.labels,
        datasets: [
          {
            data: this.data,
            backgroundColor: [' rgba(148, 180, 214,0.4)', 'rgba(239, 83, 80,0.4)', 'rgba(102, 187, 106,0.4)'],
            borderColor: [' #93b3d6', '#ef5350', '#66bb6a'],borderWidth: 1
          },
        ],
      },
      options: {
        plugins: {
          legend: {
            display: false,
          },
        },
        responsive: true,
        maintainAspectRatio: true,
        datasets: {
          bar: {
            categoryPercentage: 0.95
          }
        },
        scales: {
          y: {
            title: {
              display: true,
              text: 'Count',
            },
          },
          x: {
            title: {
              display: false,
              text: 'Total Count',
            },
          },
        },
      },
    });

谢谢

Answer 1

我终于找到了我添加到数据集中的解决方案

   datasets: {
                  bar: {
                    barThickness: 50,
                    barPercentage: 0.5,
                  }
                },

Answer 2

您应该在每个 dataset 中添加 barPercentage。

 datasets: [
          {
            data: this.data,
            backgroundColor: [' rgba(148, 180, 214,0.4)', 'rgba(239, 83, 80,0.4)', 'rgba(102, 187, 106,0.4)'],
            borderColor: [' #93b3d6', '#ef5350', '#66bb6a'],
            borderWidth: 1,
            barPercentage: 0.4
          },
        ],
    ```

Angular 图表 js 条形图宽度不起作用

Angular chart js bar chart width not working

charts

typescript

angular