Highcharts 高图表：带图像背景的圆圈 我使用HealCad创建一个馅饼，我需要把用户的配置文件图像放在中间的一个圈中。我成功地添加了图像，但无法使其成为圆形，我成功地添加了一个圆形，但没有图像背景：/ 哪种方式是最好的组合方式？ 顺便说一下，它必须是svg的一部分，而不是饼图顶部的绝对div，因为工具提示需要位于不透明度图像的顶部

要添加圆，我使用以下代码：

var pixelX = 438;
var pixelY = 276;
var pixelR = 70;

// add my circle
chart.renderer.circle(pixelX, pixelY, pixelR)
.attr({
    zIndex: 100,
    align: 'center',
    // fill: 'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)',
    color: 'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)',
    stroke: 'black',
    'stroke-width': 2
    })
.css({
  backgroundImage :'url(https://lh6.googleusercontent.com/-gaAgFzRLxQQ/AAAAAAAAAAI/AAAAAAAAAjc/ies0iU4BEqU/photo.jpg)'
})
.add();         
});

---

这个例子展示了如何使用纯SVG：

通过使用img定义一个模式来解决它，工作正常，但现在需要找到一种方法使模式不再重复

用于添加图案的代码：

function(chart) { // on complete
var r = chart.renderer,
    pattern = r.createElement('pattern')
        .attr({
            id: 'pattern',
            patternUnits: 'userSpaceOnUse',
            x: 0,
            y: 0,
            width: 180,
            height: 190,
            viewBox: '0 0 135 135'
        })
        .add(r.defs);

   r.rect(0, 0, 135, 135, 0)
       .attr('fill', '#ddd')
       .add(pattern);

   r.image(profileImg,0,0,135,135)
       .add(pattern);
});

// add my circle
this.circle = chart.renderer.circle(pixelX, pixelY, pixelR).attr({
    fill: 'url(#pattern)'
});
this.circle.add();

当我添加圆圈时，它可以填充图案：

function(chart) { // on complete
var r = chart.renderer,
    pattern = r.createElement('pattern')
        .attr({
            id: 'pattern',
            patternUnits: 'userSpaceOnUse',
            x: 0,
            y: 0,
            width: 180,
            height: 190,
            viewBox: '0 0 135 135'
        })
        .add(r.defs);

   r.rect(0, 0, 135, 135, 0)
       .attr('fill', '#ddd')
       .add(pattern);

   r.image(profileImg,0,0,135,135)
       .add(pattern);
});

// add my circle
this.circle = chart.renderer.circle(pixelX, pixelY, pixelR).attr({
    fill: 'url(#pattern)'
});
this.circle.add();

---

什么用户配置文件图像？有代码吗？我正在从facebook获取用户配置文件图像，需要按照我的描述显示它。为了简单起见，它可以是任何图像。