Chartjs 3圆环图圆角

7kjnsjlb  于 2022-11-07  发布在  Chart.js
关注(0)|答案(1)|浏览(240)

我正在使用图表js版本3,我想绘制圆形边缘的甜甜圈,我找到了图表js版本2的解决方案,但由于图表js 3中的突破性更改,我无法使解决方案与版本3兼容。
下面是版本2中的工作解决方案

  1. Chart.defaults.RoundedDoughnut = Chart.helpers.clone(Chart.defaults.doughnut);
  2. Chart.controllers.RoundedDoughnut = Chart.controllers.doughnut.extend({
  3. draw: function(ease) {
  4. var ctx = this.chart.ctx;
  5. var easingDecimal = ease || 1;
  6. var arcs = this.getMeta().data;
  7. Chart.helpers.each(arcs, function(arc, i) {
  8. arc.transition(easingDecimal).draw();
  9. var pArc = arcs[i === 0 ? arcs.length - 1 : i - 1];
  10. var pColor = pArc._view.backgroundColor;
  11. var vm = arc._view;
  12. var radius = (vm.outerRadius + vm.innerRadius) / 2;
  13. var thickness = (vm.outerRadius - vm.innerRadius) / 2;
  14. var startAngle = Math.PI - vm.startAngle - Math.PI / 2;
  15. var angle = Math.PI - vm.endAngle - Math.PI / 2;
  16. ctx.save();
  17. ctx.translate(vm.x, vm.y);
  18. ctx.fillStyle = i === 0 ? vm.backgroundColor : pColor;
  19. ctx.beginPath();
  20. ctx.arc(radius * Math.sin(startAngle), radius * Math.cos(startAngle), thickness, 0, 2 * Math.PI);
  21. ctx.fill();
  22. ctx.fillStyle = vm.backgroundColor;
  23. ctx.beginPath();
  24. ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
  25. ctx.fill();
  26. ctx.restore();
  27. });
  28. }
  29. });
  30. window.onload = function() {
  31. new Chart(document.getElementById('usersChart'), {
  32. type : 'RoundedDoughnut',
  33. data : {
  34. datasets: [
  35. {
  36. data : [40, 20, 20, 20],
  37. backgroundColor: [
  38. '#e77099',
  39. '#5da4e7',
  40. '#8f75e7',
  41. '#8fe768'
  42. ],
  43. borderWidth : 0
  44. }]
  45. },
  46. options: {
  47. cutoutPercentage: 70
  48. }
  49. });
  50. };

下面是结果图表:

toe95027

toe950271#

在v3中,您可以使用borderRadius选项在本地获得圆角:
第一个

编辑:

answer from wahab memon为基础,但经过编辑,使其适用于所有元素:
第一个

相关问题