我正在使用 ng2-chart 创建堆积条形图这是 ChartJs 的 Angular-2 版本.
我正在尝试使用 创建条形图边界半径如附图中所述，但无法找到实现此目的的选项，
请建议我一些方法来得到这个。
我的代码:
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>
最佳答案
使用 chart.js 的第 3 版，您可以使用 borderRadius 轻松配置它。属性(property)。在撰写此答案时，您需要安装 next ng2-charts的分公司因为它是使用 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>关于javascript - ChartJS中条形图的边框半径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46688812/