如何在 Chart.js 条形图上放置圆角
How to put rounded corners on a Chart.js Bar chart
我使用以下代码在 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 + '%' %>"
});
正如 中所指出的,这是在 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
});
如果不需要动画,可以稍微简化代码。
Fiddle - http://jsfiddle.net/0dzp3jxw/
从 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>
我使用以下代码在 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 + '%' %>"
});
正如
原答案
下面是如何扩展 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
});
如果不需要动画,可以稍微简化代码。
Fiddle - http://jsfiddle.net/0dzp3jxw/
从 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>