Chart.js 图片在甜甜圈段内 [英] Chart.js Picture inside doughnut segment

问题描述

我发现了关于 chart.js 和我希望为我的网站使用圆环图，我找到了一个示例，我可以从中获取基础知识:

解决方案

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

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

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

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

1. 向内平移到甜甜圈的中间.

   //计算甜甜圈中心 (cx,cy) &翻译成它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;//以 midAngle 旋转context.rotate(midAngle);

3. 向外平移到目标甜甜圈楔的中点:

   //给定圆环半径(innerRadius)和圆环半径(radius)var midWedgeRadius=chart.innerRadius+(chart.radius-chart.innerRadius)/2;context.translate(midWedgeRadius,0);

4. 将图像偏移一半图像宽度 &身高:

   //给定图像宽度 &高度context.drawImage(theImage,-theImage.width/2,-theImage.height/2);

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

   //撤消翻译 &旋转context.setTransform(1,0,0,1,0,0);

I found out about chart.js and I am looking to use a doughnut chart for my website, I found a example where I can take the basics from : https://jsfiddle.net/9wp4f693/2/

I've only found something like this, but it was to draw text inside the segments, not to add pictures.

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

But I would like to have pictures inside my segments, something like this but I have no clue how I would do this :

解决方案

There is no native ChartJS API for drawing an image inside a donut chart.

But you can manually add the images after the chart has been drawn.

For each wedge in the donut:

Warning: untested code ... some tweaking might be required

1. Translate inward to the middle of the donut.

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

2. Rotate to the mid-angle of the target donut-wedge

   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. Translate outward to the midpoint of the target donut-wedge:

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

4. Draw the image offset by half the image width & height:

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

5. Clean up the transformations by resetting the transform matrix to default:

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

这篇关于Chart.js 图片在甜甜圈段内的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！