ChartJS 中条形图的边框半径

Question

I am creating a stacked bar chart using ng2-chart which is the Angular-2 version of ChartJs .我创建使用堆积条形图NG2-图表，其是角-2版本的ChartJs 。

I am trying to create bar chart with border- radius as mentioned in the attached image, but unable to find the option to achieve this,我正在尝试创建带有边框半径的条形图，如附图中所述，但无法找到实现此目的的选项，

please suggest me some way to get this.请建议我一些方法来得到这个。

My code:我的代码：

public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: false,
    scales: {
      xAxes: [{
        stacked: true
      }],
      maxBarThickness: 5,
      yAxes: [{
        stacked: true
      }],

    },
    barThickness:20,
    legend: {
      display: true,
      position: 'right',
      labels: {
          fontColor: '#fff'
      }
  }

  };



<canvas baseChart style="height:350px; width:1150px;" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend"
[colors]="lineChartColors" [chartType]="barChartType">
 </canvas>

Answer 1

Using version 3 of chart.js you can easily configure this with the borderRadius property.使用 chart.js 的第 3 版，您可以使用borderRadius属性轻松配置它。 At the time of writing this answer you will need to install the next branch of ng2-charts since its in its 7'th release candidate for using v3 of chart.js在撰写此答案时，您将需要安装ng2-charts的next分支，因为它是使用 chart.js 的 v3 的第 7 个候选版本

 var options = { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: 'pink', borderRadius: Number.MAX_VALUE, borderSkipped: false, }] }, options: {} } var ctx = document.getElementById('chartJSContainer').getContext('2d'); new Chart(ctx, options);

 <body> <canvas id="chartJSContainer" width="600" height="400"></canvas> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script> </body>

ChartJS 中条形图的边框半径

问题描述

1 个解决方案

解决方案1
0 2021-10-25 13:09:02

ChartJS 中条形图的边框半径

问题描述

1 个解决方案

解决方案1 0 2021-10-25 13:09:02

解决方案1
0 2021-10-25 13:09:02