[英]ChartJs - Round borders on a doughnut chart with multiple datasets
我有一个包含多个数据集的常规Chartjs甜甜圈图,该数据集使用以下代码:
datasets:
[
{
label: 'Bugs',
data: [ 60 , 6.6666666666667 , 33.333333333333 ],
backgroundColor: ['#25CFE4', '#92E7F1', '#eeeeee'],
}, {
label: 'Fixes',
data: [ 60 , 0.44444444444444 , 39.555555555556 ],
backgroundColor: ['#514463', '#8C75AB', '#eeeeee'],
}, {
label: 'Redesigns',
data: [
33.333333333333 , 10.37037037037 , 56.296296296296 ],
backgroundColor: ['#1B745F', '#40C1A0', '#eeeeee'],
}
]
};
我正在尝试在比例尺上实现圆滑的边缘,我设法进行了第一轮,但其他运气不佳。
基本上,这就是我现在所拥有的
这就是我要达到的目标(对不起可怜的photoshop)
我不介意标度的起点还是圆形还是灰色区域(我将其涂成灰色只是为了给尚未填充的东西留下印象)也使边缘变圆。
谢谢
进行了一些调整并最终得到它,这正是您想要的:
Chart.pluginService.register({
afterUpdate: function (chart) {
var a=chart.config.data.datasets.length -1;
for (let i in chart.config.data.datasets) {
for(var j = chart.config.data.datasets[i].data.length - 1; j>= 0;--j) {
if (Number(j) == (chart.config.data.datasets[i].data.length - 1))
continue;
var arc = chart.getDatasetMeta(i).data[j];
arc.round = {
x: (chart.chartArea.left + chart.chartArea.right) / 2,
y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
radius: chart.innerRadius + chart.radiusLength / 2 + (a * chart.radiusLength),
thickness: chart.radiusLength / 2 - 1,
backgroundColor: arc._model.backgroundColor
}
}
a--;
}
},
afterDraw: function (chart) {
var ctx = chart.chart.ctx;
for (let i in chart.config.data.datasets) {
for(var j = chart.config.data.datasets[i].data.length - 1; j>= 0;--j) {
if (Number(j) == (chart.config.data.datasets[i].data.length - 1))
continue;
var arc = chart.getDatasetMeta(i).data[j];
var startAngle = Math.PI / 2 - arc._view.startAngle;
var endAngle = Math.PI / 2 - arc._view.endAngle;
ctx.save();
ctx.translate(arc.round.x, arc.round.y);
console.log(arc.round.startAngle)
ctx.fillStyle = arc.round.backgroundColor;
ctx.beginPath();
//ctx.arc(arc.round.radius * Math.sin(startAngle), arc.round.radius * Math.cos(startAngle), arc.round.thickness, 0, 2 * Math.PI);
ctx.arc(arc.round.radius * Math.sin(endAngle), arc.round.radius * Math.cos(endAngle), arc.round.thickness, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();
}
}
},
});
小提琴-http: //jsfiddle.net/tgyxmkLj/1/
这不是您可能正在寻找的确切答案,但这是我要获得多个数据集的倒圆角的要求。 在每个甜甜圈数据集中,此取整一种颜色。
我在Chart.js Donut上使用了圆角边缘和文本居中的答案,并进行了一些更改。 这是代码:
// round corners
Chart.pluginService.register({
afterUpdate: function (chart) {
if (chart.config.options.elements.arc.roundedCornersFor !== undefined) {
var a=chart.config.data.datasets.length -1;
for (let i in chart.config.data.datasets) {
var arc = chart.getDatasetMeta(i).data[chart.config.options.elements.arc.roundedCornersFor];
arc.round = {
x: (chart.chartArea.left + chart.chartArea.right) / 2,
y: (chart.chartArea.top + chart.chartArea.bottom) / 2,
radius: chart.innerRadius + chart.radiusLength / 2 + (a * chart.radiusLength),
thickness: chart.radiusLength / 2 - 1,
backgroundColor: arc._model.backgroundColor
}
a--;
}
}
},
afterDraw: function (chart) {
if (chart.config.options.elements.arc.roundedCornersFor !== undefined) {
var ctx = chart.chart.ctx;
for (let i in chart.config.data.datasets) {
var arc = chart.getDatasetMeta(i).data[chart.config.options.elements.arc.roundedCornersFor];
var startAngle = Math.PI / 2 - arc._view.startAngle;
var endAngle = Math.PI / 2 - arc._view.endAngle;
ctx.save();
ctx.translate(arc.round.x, arc.round.y);
console.log(arc.round.startAngle)
ctx.fillStyle = arc.round.backgroundColor;
ctx.beginPath();
ctx.arc(arc.round.radius * Math.sin(startAngle), arc.round.radius * Math.cos(startAngle), arc.round.thickness, 0, 2 * Math.PI);
ctx.arc(arc.round.radius * Math.sin(endAngle), arc.round.radius * Math.cos(endAngle), arc.round.thickness, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();
}
}
},
});
小提琴: http : //jsfiddle.net/n6vLv1zv/
希望它使您更近一步。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.