我在这里有一个JFiddle示例,它的条上有圆角曲线:https ://jsfiddle.net/qjae6xyp/
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.2;
// 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;
}
})
})
}
}
});
但是问题是我有角度的项目并使用ng2-charts。https://stackblitz.com/edit/ng2-charts-bar-template-kkmuqx?file=src/app/app.component.ts
这个例子是我的角度项目的演示,这里有horizontalBar图表。我一直在寻找很多天,以便在ng2-charts上实现此圆角功能,但是我无法通过angular访问该自定义方法ng2-charts。如果有人能提出我的stackblitz示例来展示应如何实现,我将非常高兴。
https://stackblitz.com/edit/ng2-charts-bar-template-kkmuqx?file=src/app/app.component.ts
这个类似问题的答案提供了可以与Angular一起使用的出色代码ng2-charts
。它使用该Chart.elements.Rectangle.prototype.draw
功能。我对其进行了略微调整,以适应您的需求。
请看下面的StackBlitz。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句