我使用以下代码在chart.js中创建了一个条形图。然而,我想给条形的顶部圆角而不是边缘。我无法找到任何使用chart.js全局设置实现这一效果的方法。是否有任何方法可以实现我想要的效果?
var barContext = document.getElementById("canvas").getContext("2d");
var barGradientFirst = barContext.createLinearGradient(0, 0, 0, 450);
barGradientFirst.addColorStop(0, 'rgba(112,122,157, 0.1)');
barGradientFirst.addColorStop(1, 'rgba(112,122,157, 1)');
var barGradientSecond = barContext.createLinearGradient(0, 0, 0, 450);
barGradientSecond.addColorStop(0, 'rgba(151,122,208, 0.1 )');
barGradientSecond.addColorStop(1, 'rgba(151,122,208, 1)');
var barChartData = {
labels: ["High", "Med", "Low", "None"],
datasets : [
{
fillColor : barGradientFirst,
strokeColor: "rgb(112,122,200)",
data: [30, 40, 70, 90]
}, {
fillColor : barGradientSecond,
strokeColor: "rgba(220,100,80,0.8)",
data: [50, 60, 65, 20]
}]
};
new Chart(barContext).Bar(barChartData, {
responsive : true,
scaleOverride : true,
scaleBeginAtZero : true,
scaleSteps : 2,
scaleLineWidth: 3,
scaleStepWidth : 50,
scaleShowLabels : true,
scaleShowVerticalLines: false,
scaleShowHorizontalLines: false,
scaleFontSize: 30,
barValueSpacing : 40,
barDatasetSpacing : 3,
scaleLabel: "<%= value + '%' %>"
});