SVG를 이용하여 구글 챠트내 배경 이미지 변경

var occuArray = [['Task', 'Days per Year']];

$.each(talentDetailSearch.occuList, function (i, list) { occuArray.push([list.cdValNm, list.days]); });

var data = google.visualization.arrayToDataTable(occuArray);

 

if(data.wg.length > 0){

    var options = {

    title: '프로젝트 유형',

    legend: {position: 'labeled', alignment : 'start'},

    tooltip: { trigger: 'none' },

    pieSliceText: 'percentage',

    // pieHole : 0.5, // 홀 크기 0 - 1 

    is3D: true, // 3D 표현

    backgroundColor: 'none' // 챠트내 백그라운드를 없앰

    };

 

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

   

    google.visualization.events.addListener(chart, 'ready', function () {

    // create image pattern

    var svgNS = $('svg')[0].namespaceURI;

    var pattern = document.createElementNS(svgNS, 'pattern');

    pattern.setAttribute('id', 'whiteHat');

    pattern.setAttribute('patternUnits', 'userSpaceOnUse');

    pattern.setAttribute('width', 16);

    pattern.setAttribute('height', 16);

    var image = document.createElementNS(svgNS, 'image');

    image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://findicons.com/files/icons/512/star_wars/16/clone_old.png');

    image.setAttribute('x', 0);

    image.setAttribute('y', 0);

    image.setAttribute('width', 16);

    image.setAttribute('height', 16);

    pattern.appendChild(image);

   

    var defs = document.getElementsByTagName('defs')[0];

    defs.appendChild(pattern);

    //$('#defs')[0].appendChild(pattern);

 

    // add image to pie slices

    $('svg path').attr('fill', 'url(#whiteHat)');

 

    // add image to legend circles

    $('svg circle').attr('fill', 'url(#whiteHat)');

 

    // test chart image

    $(container.parentNode).append('<img alt="Chart" src="' + chart.getImageURI() + '">');

  });

            chart.draw(data, options);

}

 

[참고]

Pie Chart에만 적용이 되고 선택, 마우스오버, 마우스아웃일때 이전 색상으로 돌아감