Google piechart pie背景画像

Question

私はGoogleのチャートを使用しています。私のpiechartコードは...色の代わりに背景の繰り返し画像を使用したいと思います。それはGoogleのチャートで可能ですか？

google.charts.load('current', {'packages':['corechart']}); 
      google.charts.setOnLoadCallback(drawChart); 
      function drawChart() { 
       var data = google.visualization.arrayToDataTable([ 
        ['Task', 'Hours per Day'], 
        ['Work',  1], 
        ['Eat',  1], 
        ['Commute', 1], 
        ['Watch TV', 1], 
        ['Sleep', 1] 
       ]); 

       var options = { 
        pieSliceBorderColor : 'none', 
        chartArea:{left:5,top:5,width:390,height:390}, 
        enableInteractivity:false, 
        pieStartAngle:30, 
        pieHole: 0.6, 
        slices: { 
         0: { color: 'brown', offset: 0.01 }, 
         1: { color: 'brown', offset: 0.01 }, 
         2: { color: 'brown', offset: 0.01 }, 
         3: { color: 'brown', offset: 0.01 }, 
         4: { color: 'brown', offset: 0.01 }, 

        } 
       }; 

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

       options.slices[sliceCount].color = 'transparent'; 
       chart.draw(data, options); 


      } 

Answer 1

は、それが

'ready'イベントに

を描画し終えた後、あなたはグラフのSVGを変更することができ、

画像を作成するが、画像

を繰り返すことでスライスを埋めるための標準的なオプションはありませんパターンを追加してsvg defsに追加

次に、図形要素tの'fill'属性を置き換えます帽子は

円グラフのスライスは、通常<path>要素
一つだけのスライス(100%)がある場合には、<rect>要素は伝説が<circle>

場合は、心に留めておくと描かれている
を使用されて描かれているイメージを持っている必要があります>getImageURIが

は、以下を参照してください作業の - メソッドを使用しているときに、チャートの画像を作成する必要があり、このような
カスタム変更は動作しません。 nippet ...

google.charts.load('current', { 
 
    callback: drawChart, 
 
    packages: ['corechart'] 
 
}); 
 

 
function drawChart() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Task', 'Hours per Day'], 
 
    ['Work',  1], 
 
    ['Eat',  1], 
 
    ['Commute', 1], 
 
    ['Watch TV', 1], 
 
    ['Sleep', 1] 
 
    ]); 
 

 
    var options = { 
 
    pieSliceBorderColor: 'none', 
 
    pieSliceText: 'none', 
 
    chartArea: { 
 
     bottom: 12, 
 
     left: 12, 
 
     top: 12, 
 
     width: 390, 
 
     height:390 
 
    }, 
 
    enableInteractivity: false, 
 
    pieStartAngle: 30, 
 
    pieHole: 0.6, 
 
    slices: { 
 
     0: { color: 'brown', offset: 0.1 }, 
 
     1: { color: 'brown', offset: 0.1 }, 
 
     2: { color: 'brown', offset: 0.1 }, 
 
     3: { color: 'brown', offset: 0.1 }, 
 
     4: { color: 'brown', offset: 0.1 }, 
 
    } 
 
    }; 
 

 
    var container = $('#piechart')[0]; 
 
    var chart = new google.visualization.PieChart(container); 
 

 
    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); 
 
    $('#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); 
 
}

div { 
 
    padding: 6px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div>piechart</div> 
 
<div id="piechart"></div> 
 
<div>image</div>