angular - 角度图表js条形图宽度不起作用

Question

我正在为我的项目使用 angular 12 和 chart 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',
            },
          },
        },
      },
    });

谢谢

标签： angulartypescriptcharts

Answer 1

您应该添加barPercentage每个dataset.

 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
          },
        ],
    ```