Chart.js甜甜圈片段内的图片

Question

我发现了关于chart.js和 我希望在我的网站上使用圆环图，我找到了一个例子，我可以从中获取基础知识：https://jsfiddle.net/9wp4f693/2/

我只发现了这样的东西，但它是在片段中绘制文字，而不是添加图片。

function drawSegmentValues()
{
    for(var i=0; i<myDoughnutChart.segments.length; i++) 
    {
        ctx.fillStyle="white";
        var textSize = myChart.width/10;
        ctx.font= textSize+"px Verdana";
        // Get needed variables
        var value = myDoughnutChart.segments[i].value;
        var startAngle = myDoughnutChart.segments[i].startAngle;
        var endAngle = myDoughnutChart.segments[i].endAngle;
        var middleAngle = startAngle + ((endAngle - startAngle)/2);

        // Compute text location
        var posX = (radius/2) * Math.cos(middleAngle) + midX;
        var posY = (radius/2) * Math.sin(middleAngle) + midY;

        // Text offside by middle
        var w_offset = ctx.measureText(value).width/2;
        var h_offset = textSize/4;

        ctx.fillText(value, posX - w_offset, posY + h_offset);
    }
}

但是我希望在我的片段中有图片，这样的东西，但我不知道我会怎么做：

Answer 1

没有用于在圆环图中绘制图像的原生ChartJS API。

但您可以在绘制图表后手动添加图像。

对于甜甜圈中的每个楔子：

警告：未经测试的代码......可能需要进行一些调整

1. 向内翻译到甜甜圈的中间。

   // calculate donut center (cx,cy) & translate to it
   var cx=chart.width/2;
   var cy=chart.height/2;
   context.translate(cx,cy);
   

2. 旋转到目标甜甜圈楔的中间角度

   var startAngle = chart.segments[thisWedgeIndex].startAngle;
   var endAngle = chart.segments[thisWedgeIndex].endAngle;
   var midAngle = startAngle+(endAngle-startAngle)/2;
   
   // rotate by the midAngle
   context.rotate(midAngle);
   

3. 向外翻译到目标甜甜圈的中点：

   // given the donut radius (innerRadius) and donut radius (radius)
   var midWedgeRadius=chart.innerRadius+(chart.radius-chart.innerRadius)/2;
   context.translate(midWedgeRadius,0);
   

4. 将图像偏移量减去图像宽度的一半＆amp;高度：

   // given the image width & height
   context.drawImage(theImage,-theImage.width/2,-theImage.height/2);
   

5. 通过将变换矩阵重置为默认值来清理变换：

   // undo translate & rotate
   context.setTransform(1,0,0,1,0,0);