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

【问题标题】：How to put rounded corners on a Chart.js Bar chart如何在 Chart.js 条形图上放置圆角
【发布时间】：2015-10-13 11:23:58
【问题描述】：

我使用以下代码在 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 + '%' %>"
});

【问题讨论】：

第一个问题很好，清晰简洁。它只是缺少一些关于您已经尝试过的信息（即查看文档、阅读属性或更改其中一些）
好吧，我确实检查了文档here，似乎没有任何东西可以让我改变条形的形状，除了大小和宽度。由于我对 javascript 很陌生，我不知道还能告诉你什么
hmmm... 我之前使用过一些 Highcharts，它将图表呈现为 html 元素的集合。在那里我可以编辑各个显示元素的 css，但这里似乎并非如此。它只是显示为图像....
@c0d3appl3 - 可以在 chartjs 中绘制圆角矩形（没有配置，但您可以扩展现有图表来执行此操作）。有一个辅助方法，你可以在工具提示上看到它。
不再痛苦。这将在下一个主要版本中添加。 chartjs.org/docs/master/charts/bar#borderradius

标签： javascript charts bar-chart rounded-corners chart.js

【解决方案1】：

正如https://stackoverflow.com/a/68778432/360067 中指出的，这是在 v3 中原生实现的。

原答案

这是扩展 Chart.js 以绘制圆角条形图的方法。

Chart.types.Bar.extend({
    name: "BarAlt",
    initialize: function (data) {
        Chart.types.Bar.prototype.initialize.apply(this, arguments);
            
        if (this.options.curvature !== undefined && this.options.curvature <= 1) {
            var rectangleDraw = this.datasets[0].bars[0].draw;
            var self = this;
            var radius = this.datasets[0].bars[0].width * this.options.curvature * 0.5;

            // override the rectangle draw with ours
            this.datasets.forEach(function (dataset) {
                dataset.bars.forEach(function (bar) {
                    bar.draw = function () {
                        // draw the original bar a little down (so that our curve brings it to its original position)
                        var y = bar.y;
                        // the min is required so animation does not start from below the axes
                        bar.y = Math.min(bar.y + radius, self.scale.endPoint - 1);
                        // adjust the bar radius depending on how much of a curve we can draw
                        var barRadius = (bar.y - y);
                        rectangleDraw.apply(bar, arguments);

                        // draw a rounded rectangle on top
                        Chart.helpers.drawRoundedRectangle(self.chart.ctx, bar.x - bar.width / 2, bar.y - barRadius + 1, bar.width, bar.height, barRadius);
                        ctx.fill();

                        // restore the y value
                        bar.y = y;
                    }
                })
            })
        }
    }
});


var lineChartData = {
    labels: ["January", "February", "March", "April", "May", "June"],
    datasets: [
        {
            fillColor: "#79D1CF",
            strokeColor: "#79D1CF",
            data: [60, 80, 81, 56, 55, 40]
        },
        {
            fillColor: "#D1CF79",
            strokeColor: "#D1CF79",
            data: [34, 43, 43, 12, 65, 65]
        }
    ]
};

var ctx = document.getElementById("myChart").getContext("2d");
var myLine = new Chart(ctx).BarAlt(lineChartData, {
    // 0 (flat) to 1 (more curvy)
    curvature: 1
});

如果不需要动画，可以稍微简化一下代码。

小提琴 - http://jsfiddle.net/0dzp3jxw/

【讨论】：

不用担心。弄清楚它很有趣:-)
如果图表的值太低，我该怎么办。我发现圆角矩形要么悬停在条形上方，要么穿过图表底部？
有谁知道如何将它与角度图一起使用？（chartjs 的包装器）
@potatopeelings 你的回答太棒了！我很想使用你的垃圾代码来使用 chart.js v2.0 扩展我的条形图。知道怎么做吗？见这里stackoverflow.com/questions/38633014/…
圆角在 v3 上原生实现 stackoverflow.com/a/68778432/1922733

【解决方案2】：

从 Chart.js v3 开始，您只需在数据集上指定 borderRadius: NUMBER。

new Chart(document.querySelector('canvas').getContext('2d'), {
        type: 'bar',
        data: {
            labels: ['1','2','3','4','5','6'],
            datasets: [{
                label: 'Sales',
                data: [20,30,10,20,30,10],
                fill: true,
                borderRadius: 15,
                borderColor: '#5eb8ff',
                backgroundColor: '#5eb8ff',
                datalabels: {
                    display: false
                }
            }]
        }
    });

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <canvas></canvas>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
</body>
</html>

【讨论】：