Question

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

<div class="row">
    <div class="container">
        <div class="col-md-3">
        </div>
        <div class="col-md-6">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1"></li>
                    <li data-target="#myCarousel" data-slide-to="2"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item active">
                        <img src="images/slideshow/1.jpg" alt="Los Angeles" style="width:100%;">
                        <div class="carousel-caption">
                            <h3>Los Angeles</h3>
                            <p>LA is always so much fun!</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/slideshow/2.jpg" alt="Chicago" style="width:100%;">
                        <div class="carousel-caption">
                            <h3>Chicago</h3>
                            <p>Thank you, Chicago!</p>
                        </div>
                    </div>

                    <div class="item">
                        <img src="images/slideshow/3.jpg" alt="New York" style="width:100%;">
                        <div class="carousel-caption">
                            <h3>New York</h3>
                            <p>We love the Big Apple!</p>
                        </div>
                    </div>

                </div>

                <!-- Left and right controls -->
                <a class="left carousel-control" href="#myCarousel" data-slide="prev">
                    <span class="glyphicon glyphicon-chevron-left"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="right carousel-control" href="#myCarousel" data-slide="next">
                    <span class="glyphicon glyphicon-chevron-right"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
        <div class="col-md-3">
        </div>
    </div>
</div>

Answer 1

没有用重复图像填充切片的标准选项

但是，您可以在完成绘图后修改图表的svg

on 'ready'事件，

创建图像模式并添加到svg defs

然后替换应该包含图像的图表元素上的'fill'属性

饼图切片通常使用<path>个元素绘制如果只有一个切片(100%)，则使用<rect>元素图例使用<circle>

绘制

请记住，如果您需要创建图表的图像，
使用方法时，这些自定义修改将无效 - ＆gt; getImageURI

请参阅以下工作代码段...

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>

谷歌饼图饼背景图像

1 个答案: