chart.js之图片甜甜圈段内

我发现了chart.js之和我期待用圆环图，我的网站，我发现了一个例子，我可以从拿基础：https://jsfiddle.net/9wp4f693/2/chart.js之图片甜甜圈段内

我我只能找到这样的东西，但它是在段内绘制文本，而不是添加图片。

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); 
    } 
}

但我想有我段内的照片，像这样的东西，但我不知道我会怎么做：

来源

2016-05-16 nick bijmoer

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

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

对于甜甜圈每个楔：

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

向内平移的甜甜圈中间。

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

旋转到目标环形楔的角中间

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);

向外转换为目标环形楔的中点：

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

绘制图像偏移一半图像宽度&高度：

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

清理所涉及的变换矩阵重置转换为默认：

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

来源

2016-05-16 04:58:48 markE

chart.js之图片甜甜圈段内

回答

相关问题