小编c0d*_*pl3的帖子

如何在Chart.js条形图上放置圆角

我使用下面的代码在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 : …
Run Code Online (Sandbox Code Playgroud)

javascript charts rounded-corners bar-chart chart.js

11
推荐指数
2
解决办法
2万
查看次数