谷歌饼图饼图背景图片

Question

我正在使用谷歌图表，这里是我的饼图代码...我想使用背景重复图片而不是颜色。这可能与谷歌图表？

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，

创建图像pattern并添加到svg defs

然后替换图表元素上的'fill'属性t帽子应具有图像

饼图切片通常与<path>元件
绘制当仅存在一个切片(100%)，一个<rect>元件用于
图例画有<circle>

记住，如果您需要创建图表的图像，
使用方法时这些自定义修改将不起作用 - >getImageURI

请参阅以下工作s 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>