图表js -填充甜甜圈

Chart.JS - Fill Donut

本文关键字：甜甜圈 填充 js 图表      更新时间：2023-09-26

我正在制作一个应用程序。这个应用程序使用Chart.js显示一些甜甜圈图表。我想用黄色填满甜甜圈的"洞"。在甜甜圈洞里，我想放一张图片。然而，我的尝试都没有成功。目前，我有以下内容，可以在这个小提琴中看到。

var data = [{
    value: 30,
    color: "#F7464A"
}, {
    value: 50,
    color: "#E2EAE9"
}, {
    value: 100,
    color: "#D4CCC5"
}, {
    value: 40,
    color: "#949FB1"
}, {
    value: 120,
    color: "#4D5360"
}
]
var options = {
    animation: false,
    backgroundColor: [
        'yellow'
    ]
};
//Get the context of the canvas element we want to select
var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d");
/*************************************************************************/
myNewChart = new Chart(ct).Doughnut(data, options);

如何自定义甜甜圈填充?谢谢!

添加options:

Chart.types.Doughnut.extend({
    name: "DoughnutAlt",
    draw: function () {
        Chart.types.Doughnut.prototype.draw.apply(this, arguments);
          //find the center point
          var x = this.chart.canvas.clientWidth / 2;
          var y = this.chart.canvas.clientHeight / 2;
          //render the text
          this.chart.ctx.beginPath();
          this.chart.ctx.arc(x,y,100,0,2*Math.PI);
          this.chart.ctx.fillStyle = '#ffff00';
          this.chart.ctx.fill();
    }
});

将myNewChart = new Chart(ct).Doughnut(data, options);改为myNewChart = new Chart(ct).DoughnutAlt(data, options);

更新小提琴

参考这个答案:当鼠标悬停在chartjs饼图上时，画布填充文本会消失

:

添加背景图片:

var img = new Image();
img.src = 'path_to_image_source';
this.chart.ctx.drawImage(img,135,130);

已更新的jsfiddle在甜甜圈图中显示图像

相关文章：