By default the bar char i rectangle, but sometime you want to make radius for bar char just flow some simple step bellow
Step 1: Extend drawRoundedTopRectangle of ChartJs and set chart type is : 'roundedBar',
Step 2: Just making chart same before but change the type of chart is: 'roundedBar' //default is bar
![](data:image/png;base64,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)
It's done you can see full source and sample at here: https://codepen.io/leotrinh/pen/LYpvJwg
Step 1: Extend drawRoundedTopRectangle of ChartJs and set chart type is : 'roundedBar',
// 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 || 1;
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.defaults.roundedBar = Chart.helpers.clone(Chart.defaults.bar);
Chart.controllers.roundedBar = Chart.controllers.bar.extend({
dataElementType: Chart.elements.RoundedTopRectangle
});
Step 2: Just making chart same before but change the type of chart is: 'roundedBar' //default is bar
It's done you can see full source and sample at here: https://codepen.io/leotrinh/pen/LYpvJwg
Không có nhận xét nào:
Đăng nhận xét