带有标签的谷歌饼图（更改标签线的颜色）

Question

我是 Google 饼图的新手。我想更改标签的样式，例如标签的线条颜色与切片的颜色匹配，如果切片为蓝色，则线条颜色应为蓝色。

有些切片没有像黄色和紫色切片那样显示其标签。

 var data3 = google.visualization.arrayToDataTable(ClaimSubmissionStatus);

        var options = {
            legend: { textStyle: { color: 'black', fontSize: 14 }, position: 'labeled', alignemnt: 'center' },
            //is3D: true,
           // legend: { position: 'labeled' },
            chartArea: { backgroundColor: '#FFFFFF', left: '5%', top: '15', width: '85%' }

        };

        var charta = new google.visualization.PieChart(document.getElementById('divClaimSubmission'));
        charta.draw(data3, options);

        google.visualization.events.addListener(charta, 'select', function () {
            debugger;
            var selectedItem = charta.getSelection()[0];
            if (selectedItem) {
                var status = data3.getValue(selectedItem.row, 0);
                CLAIMSUBMISSIONSTATUSPIECHARTDetail(status);
            }


        });

Answer 1

没有用于更改图例标记线颜色的文档选项，
但您可以在图表的'ready' 事件上手动更改

此外，确保每个切片都存在一条线的唯一解决方案是增加图表的高度

请参阅以下工作 sn-p...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['Label', 'Value'],
    ['Billed', 19],
    ['Paid Up', 9],
    ['Not Billed', 2],
    ['Ready for Review', 15],
    ['Not Paid Up', 1]
  ]);

  var options = {
    chartArea: {
      left: 12,
      top: 12,
      width: '85%'
    },
    colors: ['#3366cc', '#dc3912', '#ff9900', '#109618', '#990099', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548', '#9e9e9e', '#607d8b', '#000000', '#ffffff'],
    legend: {
      position: 'labeled'
    }
  };

  var container = document.getElementById('chart_div');
  var chart = new google.visualization.PieChart(container);
  var drawCount = 0;
  var drawMax = 100;

  google.visualization.events.addListener(chart, 'ready', function () {
    var observer = new MutationObserver(function () {
      var svg = container.getElementsByTagName('svg');
      if (svg.length > 0) {
        var legend = getLegend(svg[0]);
        // check number of markers
        if (legend.length !== data.getNumberOfRows()) {
          // increase height & redraw chart
          options.height = parseFloat(svg[0].getAttribute('height')) + 32;
          drawCount++;
          if (drawCount < drawMax) {
            chart.draw(data, options);
          }
        } else {
          // change legend marker colors
          var colorIndex = 0;
          legend.forEach(function (legendMarker) {
            legendMarker.path.setAttribute('stroke', options.colors[colorIndex]);
            if (legendMarker.hasOwnProperty('circle')) {
              legendMarker.circle.setAttribute('fill', options.colors[colorIndex]);
            }
            colorIndex++;
            if (colorIndex > options.colors.length) {
              colorIndex = 0;
            }
          });
        }
      }
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

  // get array of legend markers -- {path: pathElement, circle: circleElement}
  function getLegend(svg) {
    var legend = [];
    Array.prototype.forEach.call(svg.childNodes, function(child) {
      var group = child.getElementsByTagName('g');
      Array.prototype.forEach.call(group, function(subGroup) {
        var path = subGroup.getElementsByTagName('path');
        if (path.length > 0) {
          if (path[0].getAttribute('fill') === 'none') {
            var legendMarker = {
              path: path[0]
            };
            var circle = subGroup.getElementsByTagName('circle');
            if (circle.length > 0) {
              legendMarker.circle = circle[0];
            }
            legend.push(legendMarker);
          }
        }
      });
    });
    return legend;
  }

  chart.draw(data, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

注意事项：
1) 需要使用自定义颜色以保持切片和线条颜色同步
2) MutationObserver 是必需的，图表将在交互时恢复，例如悬停或选择
3) 使用图表方法getImageURI 时手动更改不会反映