Как заполнить пользовательский шаблон png или svg в круговой диаграмме Highcharts ⇐ Jquery

[Anonymous]

Я пытался построить круговую диаграмму с помощью highcharts и пытался добавить в нее собственный шаблон. До сих пор мне удавалось сделать это для всех остальных диаграмм, используя приведенный ниже код: -

Код: Выделить всё

    var gfxPath = 'https://sampleproject-shivkumarganesh.c9users.io/img/';

Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Stacked bar chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
min: 0,
title: {
text: 'Total fruit consumption'
}
},
legend: {
reversed: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
color: {
pattern: gfxPath + 'Dots_Large.png',
width: 10,
height: 10
}
}, {
name: 'Jane',
data: [2, 2, 3, 2, 1],
color: {
pattern: gfxPath + 'Grid.png',
width: 10,
height: 10
}
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
color: {
pattern: gfxPath + 'Bricks.png',
width: 15,
height: 15
}
}]
});

Проблема в том, что когда я делаю то же самое для круговой диаграммы, она вообще не работает. Пользовательский SVG сборки, представленный в этом примере, работает. Как мне заполнить его пользовательским шаблоном PNG или шаблоном SVG?

http://jsfiddle.net/highcharts/gqg618eb/

Но когда я пытаюсь заполнить его каким-либо PNG или чем-то еще, например SVG, он ломается.

ПРИМЕЧАНИЕ. Я использую последние Highcharts и плагин для заполнения узором.