Javascript 如何在甜甜圈图中间添加图像？（图表。JS）

我正在使用Chart.js可视化我的数据，如下图所示

我想在图表中间加一张照片。< /P>

如何在甜甜圈图中间添加照片？ 下面是我的javascript代码：

$.ajax({
    type: "POST",
    url: "/Plant/SunChart",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (jsonData) {
        var items = jsonData[0];
        var countOfItems = jsonData[1];
        var ctx = document.getElementById("sunPieChart");
        var myPieChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: items,
                datasets: [{
                    data: countOfItems,
                    backgroundColor: ['#ffff00', '#ffffa4', '#ced5df'],
                    hoverBackgroundColor: ['#ffff00', '#ffffa4', '#ced5df'],
                    hoverBorderColor: "rgba(234, 236, 244, 1)",
                }],
            },
            options: {
                maintainAspectRatio: false,
                tooltips: {
                    backgroundColor: "rgb(255,255,255)",
                    bodyFontColor: "#858796",
                    borderColor: '#dddfeb',
                    borderWidth: 1,
                    xPadding: 15,
                    yPadding: 15,
                    displayColors: false,
                    caretPadding: 10,
                },
                legend: {
                    display: false
                },
                cutoutPercentage: 80,
            },
        });
    }
});

归功于 和 和 提供了一系列钩子，可用于执行自定义代码。您可以使用

afterDraw

hook直接在画布上绘制图像

请在下面查看您的修订代码

新图表（“myChart”{
键入：“甜甜圈”，
插件：[{
后置绘图：图表=>{
var ctx=chart.chart.ctx；
ctx.save（）；
var image=新图像（）；
image.src=https://i.stack.imgur.com/S7tJH.png';      
图像大小=40；
ctx.drawImage（image，chart.chart.width/2-imageSize/2，chart.chart.height/2-imageSize/2，imageSize，imageSize）；
ctx.restore（）；
}
}],
数据：{
标签：['A'，'B'，'C']，
数据集：[{
数据：[50,25,25]，
背景颜色：['ffff00'，'FFFFFF4'，'ced5df']，
hoverBackgroundColor:['#ffff00'、'#FFFF4'、'#ced5df']，
hoverBorderColor:“rgba（234236244,1）”，
}],
},
选项：{
MaintaintAspectRatio:false，
工具提示：{
背景颜色：“rgb（255255）”，
bodyFontColor:#858796“，
边框颜色：“#dddfeb”，
边框宽度：1，
加上：15，
加上：15，
显示颜色：假，
护理添加：10，
},
图例：{
显示：假
},
门诊量：80，
},
});


<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>