Question

我使用Highcharts创建一个饼图，我需要将用户的个人资料图片放在其中间的圆圈中。我已设法添加图像但无法使其成为圆形，我设法添加了一个圆圈，但没有图像背景：/ 什么是结合拖车的最佳方式？顺便说一下它必须是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执行此操作：http://jsfiddle.net/9zkfodwp/1/

Answer 1

通过使用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();

Highcharts：圈子与图像背景

1 个答案: