ハイチャート：画像の背景を持つ円

Question

私はパイを作成するためにハイチャートを使用しています、そして、私はその中にサークルのユーザのプロフィール画像を置く必要があります。私はイメージを追加することができましたが、それを丸くすることができませんでした。私はサークルを追加することができましたが、イメージの背景はありません：/ トウを組み合わせるにはどうすればいいですか？

：ツールヒントは、私はこのコードを使用し、円を追加し、不透明度

とその画像の上にする必要があるので、それは、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でそれを行う方法を示しています。

Answer 1

http://jsfiddle.net/9zkfodwp/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();