Javascript 如何在有角度的情况下圆角?

Javascript 如何在有角度的情况下圆角?,javascript,angular,typescript,charts,Javascript,Angular,Typescript,Charts,我正试着绕过我的chartjs栏,但我无法得到它 我使用的是Angular 11和2.9.4 chartjs版本 这是我的组件,我在其中创建图表: export class StatisticsComponent implements OnInit { barChartOptionsAllTime: ChartOptions = {}; barChartLabelsAllTime: Label[] = []; barChartTypeAllTime: ChartType = 'ba

我正试着绕过我的chartjs栏,但我无法得到它

我使用的是Angular 11和2.9.4 chartjs版本

这是我的组件,我在其中创建图表:

export class StatisticsComponent implements OnInit {

  barChartOptionsAllTime: ChartOptions = {};
  barChartLabelsAllTime: Label[] = [];
  barChartTypeAllTime: ChartType = 'bar';
  barChartLegendAllTime = false;
  barChartPluginsAllTime = [];

  barChartDataAllTime: ChartDataSets[] = [
    {
      data: [],
      borderWidth: 2,
      backgroundColor: "rgba(0, 170, 228, .5)",
      hoverBackgroundColor: "rgba(2, 147, 196)",
      borderColor: 'rgb(0, 103, 138)',
      hoverBorderColor: "rgb(0, 103, 138)",
      lineTension: .1,
      radius: 20
    }
  ];

  constructor(private databaseService: DatabaseService) {
    this.getstatistics();
  }

  ngOnInit(): void {
  }

  async getstatistics() {
    await this.databaseService.getStatisticsPlacesAllTime()
      .then(resp => {
        let maxCounter = 0;
        for (const statistics of resp) {
          this.barChartLabelsAllTime.push(statistics.title);
          this.barChartDataAllTime[0].data?.push(statistics.quantity);

          if (statistics.quantity > maxCounter) maxCounter = statistics.quantity;
        }

        this.barChartOptionsAllTime = this.createBarChartOptions(this.barChartOptionsAllTime, maxCounter)
      })
      .catch(err => {
        $("#errorModalMessage").html(keys.error_modal_message_2);
        $('#errorModal').modal('show');
      });
  }

  createBarChartOptions(barChartOptions: ChartOptions, maxYAxes: number): ChartOptions {
    barChartOptions = {
      responsive: true,
      scales: {
        yAxes: [{
          ticks: {
            stepSize: 1,
            min: 0,
            max: maxYAxes + 1
          }
        }]
      }
    }

    return barChartOptions;
  }
}

我用的是半径,但它不起作用


我不知道2.9.4 chartjs版本是否可以做到这一点,我知道在最新版本中是这样的。

看起来您应该使用“borderRadius”而不仅仅是“radius”。

您好,您是否可以在Stackblitz上分享您的代码示例。那真的很有帮助对不起,我想应该是这样的链接:解决方法是给画布元素提供边界半径。我想是的。。。谢谢你找到解决方案了吗?它在最新版本中工作,但这是2.9.4版本。@JuanGracia根据文档,没有radius属性,因为它是画布,所以不能使用CSS。您可以尝试编写一个指令来更新此图表,但这不是一个好方法,因为您可以简单地更新库。