ChartJS中条形图的边框半径
Posted
技术标签:
【中文标题】ChartJS中条形图的边框半径【英文标题】：Border radius for the bar chart in ChartJS 【发布时间】：2018-03-23 03:55:49 【问题描述】：我正在使用 ng2-chart 创建一个堆积条形图，这是 ChartJs 的 Angular-2 版本。
我正在尝试创建带有 border-radius 的条形图，如附图中所述，但无法找到实现此目的的选项，
请给我一些方法来得到这个。
我的代码：
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>
【问题讨论】：
可能与这个问题有关——***.com/questions/43254153/…。不确定是否与 ng2-chart 相同 你找到解决办法了吗？ 你有解决办法吗？ 【参考方案1】：使用第 3 版的 chart.js，您可以使用 borderRadius 属性轻松配置它。在撰写此答案时，您需要安装 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" ></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>【讨论】：
以上是关于ChartJS中条形图的边框半径的主要内容，如果未能解决你的问题，请参考以下文章
自动调整 ggplot 中条形图的大小，以实现多个图形 R 的一致性