ChartJS 中条形图的边框半径

Question

ChartJS 中条形图的边框半径

Naj*_*aju 6 javascript css angularjs chart.js ng2-charts

我创建使用堆积条形图NG2-图表，其是角-2版本的ChartJs。

我正在尝试创建带有边框半径的条形图，如附图中所述，但无法找到实现此目的的选项，

请建议我一些方法来得到这个。

我的代码：

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Lee*_*lee 1

使用 Chart.js 的版本 3，您可以使用该属性轻松配置它borderRadius。在撰写此答案时，您需要安装next的分支，ng2-charts因为它是第 7 个候选版本，以便使用 Chart.js v3

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);

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，3 月前
查看次数：	5311 次
最近记录：	8 年，3 月前