尝试使用此帖子中的round the bars on bar chart，其效果与所提供的jsFiddle中显示的相同。这适用于版本1.
在我使用的图表中，无法加载extend Chart.types.Bar.extend对{1}}的引用，导致脚本崩溃。
如果我使用默认选项，则图表不会加载任何问题。我必须将Chart.types.Bar.extend放在最后才能正确加载默认选项。在全屏幕中运行并查看此内容。
我尝试使用我的Chart.js 2.4.0版本来实现它。
Chrome报告：
未捕获的TypeError：无法读取属性＆＃39;延伸＆＃39;未定义的 chart.js之
此代码甚至不会在这里运行。为什么会这样？有人可以帮助我。
此代码适用于旧版本的Chart.js 1.0。有谁可以请进一步展示如何使用版本Chart.js 2.0？谢谢。
$(document).ready(function(){
var myBarChart1 = new Chart($('#appBarChart2_NoRound'), {
type: 'bar',
data: dataBar2,
options: optionsBar
});
var ctx = $("#appBarChart2").getContext("2d");
var myBarChart2 = new Chart(ctx).BarAlt(dataBarAlt2, {
// 0 (flat) to 1 (more curvy)
curvature: 1
});
});
var dataBarAlt2 = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
fillColor: "#1A9BFC",
strokeColor: "#1A9BFC",
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var dataBar2 = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [
{
label: "My First dataset",
backgroundColor: '#1A9BFC',
borderColor:'#1A9BFC',
borderWidth: 1,
data: [65, 59, 80, 81, 56, 55, 40],
}
]
};
var optionsBar =
{
scales: {
xAxes: [{
stacked: true,
barThickness: 20,
gridLines:{
display:false,
}
// barPercentage:0.5,
}],
yAxes: [{
stacked: true,
// barPercentage:0.5,
}]
},
legend: {
display: false,
// position: 'left'
}
};
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;
}
})
})
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Bar Chart - Working</p>
<canvas id="appBarChart2_NoRound" height="100" >
</div>
<div>
<p>Rounded Bar Chart - Not Working</p>
<canvas id="appBarChart2" height="100" >
</div>
答案 0 :(得分：9)
您尝试使用的代码实际上是针对chart.js v1，并且正如您所发现的那样，对于chart.js v2（这几乎是一个完整的chart.js重写）不起作用。
要在chart.js v2中获得相同的结果，您需要扩展Chart.elements.Rectangle并覆盖它的draw方法以绘制圆顶。已经有一个chart.js辅助方法将绘制一个圆角矩形（Chart.helpers.drawRoundedRectangle），所以我们将稍微修改它并创建一个新的辅助方法，只绘制一个圆顶（而不是所有边）。 / p>
// draws a rectangle with a rounded top
Chart.helpers.drawRoundedTopRectangle = function(ctx, x, y, width, height, radius) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
// top right corner
ctx.lineTo(x + width - radius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
// bottom right corner
ctx.lineTo(x + width, y + height);
// bottom left corner
ctx.lineTo(x, y + height);
// top left
ctx.lineTo(x, y + radius);
ctx.quadraticCurveTo(x, y, x + radius, y);
ctx.closePath();
};
Chart.elements.RoundedTopRectangle = Chart.elements.Rectangle.extend({
draw: function() {
var ctx = this._chart.ctx;
var vm = this._view;
var left, right, top, bottom, signX, signY, borderSkipped;
var borderWidth = vm.borderWidth;
if (!vm.horizontal) {
// bar
left = vm.x - vm.width / 2;
right = vm.x + vm.width / 2;
top = vm.y;
bottom = vm.base;
signX = 1;
signY = bottom > top? 1: -1;
borderSkipped = vm.borderSkipped || 'bottom';
} else {
// horizontal bar
left = vm.base;
right = vm.x;
top = vm.y - vm.height / 2;
bottom = vm.y + vm.height / 2;
signX = right > left? 1: -1;
signY = 1;
borderSkipped = vm.borderSkipped || 'left';
}
// Canvas doesn't allow us to stroke inside the width so we can
// adjust the sizes to fit if we're setting a stroke on the line
if (borderWidth) {
// borderWidth shold be less than bar width and bar height.
var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
borderWidth = borderWidth > barSize? barSize: borderWidth;
var halfStroke = borderWidth / 2;
// Adjust borderWidth when bar top position is near vm.base(zero).
var borderLeft = left + (borderSkipped !== 'left'? halfStroke * signX: 0);
var borderRight = right + (borderSkipped !== 'right'? -halfStroke * signX: 0);
var borderTop = top + (borderSkipped !== 'top'? halfStroke * signY: 0);
var borderBottom = bottom + (borderSkipped !== 'bottom'? -halfStroke * signY: 0);
// not become a vertical line?
if (borderLeft !== borderRight) {
top = borderTop;
bottom = borderBottom;
}
// not become a horizontal line?
if (borderTop !== borderBottom) {
left = borderLeft;
right = borderRight;
}
}
// calculate the bar width and roundess
var barWidth = Math.abs(left - right);
var roundness = this._chart.config.options.barRoundness || 0.5;
var radius = barWidth * roundness * 0.5;
// keep track of the original top of the bar
var prevTop = top;
// move the top down so there is room to draw the rounded top
top = prevTop + radius;
var barRadius = top - prevTop;
ctx.beginPath();
ctx.fillStyle = vm.backgroundColor;
ctx.strokeStyle = vm.borderColor;
ctx.lineWidth = borderWidth;
// draw the rounded top rectangle
Chart.helpers.drawRoundedTopRectangle(ctx, left, (top - barRadius + 1), barWidth, bottom - prevTop, barRadius);
ctx.fill();
if (borderWidth) {
ctx.stroke();
}
// restore the original top value so tooltips and scales still work
top = prevTop;
},
});
接下来，您还必须扩展条形图控制器（Chart.controllers.bar）并覆盖dataElementType以使用图表的新“圆角矩形”而不是常规矩形。
Chart.defaults.roundedBar = Chart.helpers.clone(Chart.defaults.bar);
Chart.controllers.roundedBar = Chart.controllers.bar.extend({
dataElementType: Chart.elements.RoundedTopRectangle
});
最后，我们将修改图表的配置以使用上面创建的新图表类型并添加一个名为barRoundness的新选项属性来控制顶部的圆周（0是平面，1是半圆）
var ctx = document.getElementById("canvas").getContext("2d");
var myBar = new Chart(ctx, {
type: 'roundedBar',
data: {
labels: ["Car", "Bike", "Walking"],
datasets: [{
label: 'Students',
backgroundColor: chartColors.blue,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
]
}, {
label: 'Teachers',
backgroundColor: chartColors.red,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
]
}, {
label: 'Visitors',
backgroundColor: chartColors.green,
data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
]
}]
},
options: {
responsive: true,
barRoundness: 1,
title: {
display: true,
text: "Chart.js - Bar Chart with Rounded Tops (drawRoundedTopRectangle Method)"
},
}
});
您可以在此codepen看到完整的工作示例。
另外，如果你想要一个稍微不同的“圆顶”外观，这里是另一个codepen使用不同的方法来绘制顶部（单个二次曲线）。
答案 1 :(得分：2)
Solution不适用于2.8.0之后的chart.js版本。
要使其正常工作，只需在drawRoundedTopRectangle定义之前添加以下代码
Chart.helpers.merge(Chart.defaults.global, {
datasets: {
roundedBar: {
categoryPercentage: 0.8,
barPercentage: 0.9
}
}
});
答案 2 :(得分：1)
以下仅自定义Chart.elements.Rectangle.prototype.draw-无需创建全新的图表类型。
其他优点：
注意的问题：，因为这只会舍入最后一个数据集中的框，如果最后一个数据集中的数据点的值是<先前数据点中的任意一个，则视觉上最顶部的框将不四舍五入。 但是，如果最后一个数据点为负且值为最低，它将在底角四舍五入。
信用：原始代码属于https://github.com/uffo。下面的代码和链接的小提琴展示了每个堆栈中每个数据集中正值的增加，并且还修改了一些默认的半径选项。
/**Customize the Rectangle.prototype draw method**/
Chart.elements.Rectangle.prototype.draw = function() {
var ctx = this._chart.ctx;
var vm = this._view;
var left, right, top, bottom, signX, signY, borderSkipped, radius;
var borderWidth = vm.borderWidth;
// If radius is less than 0 or is large enough to cause drawing errors a max
// radius is imposed. If cornerRadius is not defined set it to 0.
var cornerRadius = this._chart.config.options.cornerRadius;
var fullCornerRadius = this._chart.config.options.fullCornerRadius;
var stackedRounded = this._chart.config.options.stackedRounded;
var typeOfChart = this._chart.config.type;
if (cornerRadius < 0) {
cornerRadius = 0;
}
if (typeof cornerRadius == 'undefined') {
cornerRadius = 0;
}
if (typeof fullCornerRadius == 'undefined') {
fullCornerRadius = false;
}
if (typeof stackedRounded == 'undefined') {
stackedRounded = false;
}
if (!vm.horizontal) {
// bar
left = vm.x - vm.width / 2;
right = vm.x + vm.width / 2;
top = vm.y;
bottom = vm.base;
signX = 1;
signY = bottom > top ? 1 : -1;
borderSkipped = vm.borderSkipped || 'bottom';
} else {
// horizontal bar
left = vm.base;
right = vm.x;
top = vm.y - vm.height / 2;
bottom = vm.y + vm.height / 2;
signX = right > left ? 1 : -1;
signY = 1;
borderSkipped = vm.borderSkipped || 'left';
}
// Canvas doesn't allow us to stroke inside the width so we can
// adjust the sizes to fit if we're setting a stroke on the line
if (borderWidth) {
// borderWidth shold be less than bar width and bar height.
var barSize = Math.min(Math.abs(left - right), Math.abs(top - bottom));
borderWidth = borderWidth > barSize ? barSize : borderWidth;
var halfStroke = borderWidth / 2;
// Adjust borderWidth when bar top position is near vm.base(zero).
var borderLeft = left + (borderSkipped !== 'left' ? halfStroke * signX : 0);
var borderRight = right + (borderSkipped !== 'right' ? -halfStroke * signX : 0);
var borderTop = top + (borderSkipped !== 'top' ? halfStroke * signY : 0);
var borderBottom = bottom + (borderSkipped !== 'bottom' ? -halfStroke * signY : 0);
// not become a vertical line?
if (borderLeft !== borderRight) {
top = borderTop;
bottom = borderBottom;
}
// not become a horizontal line?
if (borderTop !== borderBottom) {
left = borderLeft;
right = borderRight;
}
}
ctx.beginPath();
ctx.fillStyle = vm.backgroundColor;
ctx.strokeStyle = vm.borderColor;
ctx.lineWidth = borderWidth;
// Corner points, from bottom-left to bottom-right clockwise
// | 1 2 |
// | 0 3 |
var corners = [
[left, bottom],
[left, top],
[right, top],
[right, bottom]
];
// Find first (starting) corner with fallback to 'bottom'
var borders = ['bottom', 'left', 'top', 'right'];
var startCorner = borders.indexOf(borderSkipped, 0);
if (startCorner === -1) {
startCorner = 0;
}
function cornerAt(index) {
return corners[(startCorner + index) % 4];
}
// Draw rectangle from 'startCorner'
var corner = cornerAt(0);
ctx.moveTo(corner[0], corner[1]);
var nextCornerId, nextCorner, width, height, x, y;
for (var i = 1; i < 4; i++) {
corner = cornerAt(i);
nextCornerId = i + 1;
if (nextCornerId == 4) {
nextCornerId = 0
}
nextCorner = cornerAt(nextCornerId);
width = corners[2][0] - corners[1][0];
height = corners[0][1] - corners[1][1];
x = corners[1][0];
y = corners[1][1];
var radius = cornerRadius;
// Fix radius being too large
if (radius > Math.abs(height) / 2) {
radius = Math.floor(Math.abs(height) / 2);
}
if (radius > Math.abs(width) / 2) {
radius = Math.floor(Math.abs(width) / 2);
}
var x_tl, x_tr, y_tl, y_tr, x_bl, x_br, y_bl, y_br;
if (height < 0) {
// Negative values in a standard bar chart
x_tl = x;
x_tr = x + width;
y_tl = y + height;
y_tr = y + height;
x_bl = x;
x_br = x + width;
y_bl = y;
y_br = y;
// Draw
ctx.moveTo(x_bl + radius, y_bl);
ctx.lineTo(x_br - radius, y_br);
// bottom right
ctx.quadraticCurveTo(x_br, y_br, x_br, y_br - radius);
ctx.lineTo(x_tr, y_tr + radius);
// top right
fullCornerRadius ? ctx.quadraticCurveTo(x_tr, y_tr, x_tr - radius, y_tr) : ctx.lineTo(x_tr, y_tr, x_tr - radius, y_tr);
ctx.lineTo(x_tl + radius, y_tl);
// top left
fullCornerRadius ? ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl + radius) : ctx.lineTo(x_tl, y_tl, x_tl, y_tl + radius);
ctx.lineTo(x_bl, y_bl - radius);
// bottom left
ctx.quadraticCurveTo(x_bl, y_bl, x_bl + radius, y_bl);
} else if (width < 0) {
// Negative values in a horizontal bar chart
x_tl = x + width;
x_tr = x;
y_tl = y;
y_tr = y;
x_bl = x + width;
x_br = x;
y_bl = y + height;
y_br = y + height;
// Draw
ctx.moveTo(x_bl + radius, y_bl);
ctx.lineTo(x_br - radius, y_br);
// Bottom right corner
fullCornerRadius ? ctx.quadraticCurveTo(x_br, y_br, x_br, y_br - radius) : ctx.lineTo(x_br, y_br, x_br, y_br - radius);
ctx.lineTo(x_tr, y_tr + radius);
// top right Corner
fullCornerRadius ? ctx.quadraticCurveTo(x_tr, y_tr, x_tr - radius, y_tr) : ctx.lineTo(x_tr, y_tr, x_tr - radius, y_tr);
ctx.lineTo(x_tl + radius, y_tl);
// top left corner
ctx.quadraticCurveTo(x_tl, y_tl, x_tl, y_tl + radius);
ctx.lineTo(x_bl, y_bl - radius);
// bttom left corner
ctx.quadraticCurveTo(x_bl, y_bl, x_bl + radius, y_bl);
} else {
var lastVisible = 0;
for (var findLast = 0, findLastTo = this._chart.data.datasets.length; findLast < findLastTo; findLast++) {
if (!this._chart.getDatasetMeta(findLast).hidden) {
lastVisible = findLast;
}
}
var rounded = this._datasetIndex === lastVisible;
if (rounded) {
//Positive Value
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
// top right
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
ctx.lineTo(x + width, y + height - radius);
// bottom right
if (fullCornerRadius || typeOfChart == 'horizontalBar')
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
else
ctx.lineTo(x + width, y + height, x + width - radius, y + height);
ctx.lineTo(x + radius, y + height);
// bottom left
if (fullCornerRadius)
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
else
ctx.lineTo(x, y + height, x, y + height - radius);
ctx.lineTo(x, y + radius);
// top left
if (fullCornerRadius || typeOfChart == 'bar')
ctx.quadraticCurveTo(x, y, x + radius, y);
else
ctx.lineTo(x, y, x + radius, y);
}else {
ctx.moveTo(x, y);
ctx.lineTo(x + width, y);
ctx.lineTo(x + width, y + height);
ctx.lineTo(x, y + height);
ctx.lineTo(x, y);
}
}
}
ctx.fill();
if (borderWidth) {
ctx.stroke();
}
};
/**Chart Data**/
var data = {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: 'data 0',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 0
}, {
label: 'data 1',
data: [20, 24, 10, 15, 12, 13],
backgroundColor: [
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 206, 86, 1)',
'rgba(54, 162, 235, 1)',
'rgba(153, 102, 255, 1)',
'rgba(75, 192, 192, 1)'
],
borderWidth: 0
}, {
label: 'data 2',
data: [20, 30, 30, 20, 14, 20],
backgroundColor: [
'rgba(75, 192, 192, 1)',
'rgba(255, 159, 64, 1)',
'rgba(255, 99, 132, 1)',
'rgba(255, 206, 86, 1)',
'rgba(54, 162, 235, 1)',
'rgba(153, 102, 255, 1)'
],
borderWidth: 0
}]
};
/**Chart Options - Radius options are here**/
var options = {
//Border radius; Default: 0; If a negative value is passed, it will overwrite to 0;
cornerRadius: 10,
//Default: false; if true, this would round all corners of final box;
fullCornerRadius: false,
//Default: false; if true, this rounds each box in the stack instead of only final box;
stackedRounded: false,
elements: {
point: {
radius: 25,
hoverRadius: 35,
pointStyle: 'rectRounded',
}
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
},
stacked: true,
radius: 25
}],
xAxes: [{
ticks: {
beginAtZero: true
},
stacked: true,
}]
}
};
/**Generate Chart**/
var ctxBar = document.getElementById("myChart");
var myBarChart = new Chart(ctxBar, {
type: 'bar',
data: data,
options: options
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<canvas id="myChart" height="300" width="800"></canvas>
答案 3 :(得分：1)
让它在 Angular 11 和 Charts.js 2.9.4 版中工作（也可能在其他版本中工作）
在 export class { .. } 之后在 .component.ts 文件的最后添加此内容
Chart['elements'].Rectangle.prototype.draw = function() {
let ctx = this._chart.ctx;
let view = this._view;
//////////////////// edit this to change how rounded the edges are /////////////////////
let borderRadius = 10;
let left = view.x - view.width / 2;
let right = view.x + view.width / 2;
let top = view.y;
let bottom = view.base;
ctx.beginPath();
ctx.fillStyle = view.backgroundColor;
ctx.strokeStyle = view.borderColor;
ctx.lineWidth = view.borderWidth;
let barCorners = [
[left, bottom],
[left, top],
[right, top],
[right, bottom]
];
//start in bottom-left
ctx.moveTo(barCorners[0][0], barCorners[0][1]);
for (let i = 1; i < 4; i++) {
let x = barCorners[1][0];
let y = barCorners[1][1];
let width = barCorners[2][0] - barCorners[1][0];
let height = barCorners[0][1] - barCorners[1][1];
//Fix radius being too big for small values
if(borderRadius > width/2){
borderRadius = width/2;
}
if(borderRadius > height/2){
borderRadius = height/2;
}
// DRAW THE LINES THAT WILL BE FILLED - REPLACING lineTo with quadraticCurveTo CAUSES MORE EDGES TO BECOME ROUNDED
ctx.moveTo(x + borderRadius, y);
ctx.lineTo(x + width - borderRadius, y);
ctx.quadraticCurveTo(x + width, y, x + width, y + borderRadius);
ctx.lineTo(x + width, y + height - borderRadius);
ctx.lineTo(x + width, y + height, x + width - borderRadius, y + height);
ctx.lineTo(x + borderRadius, y + height);
ctx.lineTo(x, y + height, x, y + height - borderRadius);
ctx.lineTo(x, y + borderRadius);
ctx.quadraticCurveTo(x, y, x + borderRadius, y);
}
//FILL THE LINES
ctx.fill();
};
ngOnInit 方法示例：
ngOnInit() {
console.log("asdf entering getChart");
this.canvas = document.getElementById('NumberOfSessionsChart');
this.ctx = this.canvas.getContext('2d');
this.myChart = new Chart(this.ctx, {
type: 'bar',
data: {
labels: ['Jan 20', 'Feb 20', 'Mar 20', 'Apr 20', 'May 20', 'Jun 20', 'Jul 20', 'Aug 20', 'Sept 20'],
datasets: [{
label: 'vVals',
backgroundColor: 'blue',
data: [0, 50, 20, 30, 40, 50, 60, 70, 80, 90, 100],
}]
},
options: {
devicePixelRatio: 2.2,
//tooltips are the things that appear when you hover over the data that show the counts.
//for some reason we can't choose where the tooltip is oriented.
tooltips: {
enabled: false
},
onClick: (e) => {
console.log("asdf entering on click");
},
legend: {
display: true,
position: 'right',
reverse: true,
labels: {
fontColor: 'black',
fontSize: 15,
padding: 20,
usePointStyle: true,
//width of circles in legend
boxWidth: 9
}
},
scales: {
xAxes: [{
ticks: {
padding: 10,
fontSize: 13,
fontFamily: 'Roboto',
fontColor: 'black',
beginAtZero: true
},
gridLines: {
tickMarkLength: 0,
color: '#9da0a2',
drawOnChartArea: false,
},
}],
yAxes: [{
ticks: {
padding: 10,
fontSize: 13,
fontFamily: 'Roboto',
fontColor: 'black',
beginAtZero: true,
precision:0
},
gridLines: {
tickMarkLength: 0,
color: '#9da0a2',
drawOnChartArea: false,
},
}],
},
responsive: false,
}
});
}
}
答案 4 :(得分：0)
您只需要
import 'chartjs-top-round-bar';
...
new Chart('myChart',
{
options: {
barRoundness: 0.3
}
}
答案 5 :(得分：0)
值得一提的是，该解决方案需要30秒钟才能实现：
https://github.com/jedtrow/Chart.js-Rounded-Bar-Charts
下载.js文件并将其放入您的项目文件夹，加载并使用
var options = {
cornerRadius: 20,
};
获取圆条。