使用Angular和chartJS创建圆角条形图

<canvas id="barChart"></canvas>

import { Component, OnInit } from '@angular/core';
import * as Chart from 'chart.js';

@Component({
  selector: 'app-bar-chart',
  templateUrl: './bar-chart.component.html',
  styleUrls: ['./bar-chart.component.css']
})
export class BarChartComponent implements OnInit {
  barChart: any;

  ngOnInit() {
    const canvas: any = document.getElementById('barChart');
    const ctx = canvas.getContext('2d');
  
    this.barChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Label 1', 'Label 2', 'Label 3'],
        datasets: [{
          label: 'Dataset',
          data: [10, 20, 30],
          backgroundColor: 'rgba(0, 123, 255, 0.8)',  // 设置背景颜色
          borderRadius: 10  // 设置圆角半径
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false
      }
    });
  }
}

#barChart {
  width: 400px;
  height: 300px;
}