javascript - 如何更改标签颜色 - Donutchart Google API

Question

正如您所看到的图像，我只想根据谷歌图表中的圆环弧颜色更改 12.5(绿色)和 25(红色)的颜色

代码:-

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

var observer = new MutationObserver(function () {
  $.each($('#chart_div path[stroke="#636363"]'), function (index, path) {
    $(path).attr('stroke', '#000');
  });

  $.each($('#chart_div text[fill="#9e9e9e"]'), function (index, label) {
     $(label).attr('fill', 'yellow');
  });
var options = {
      width: '360',
      height: '200',
      chartArea: {
          height: "94%",
          width: "94%"
      },
      colors: ['#e0440e', 'green', 'red', '#f3b49f', '#f6c7b6'],
      title: 'My Daily Activities',

      pieHole: 0.6,
      legend: {
          position: 'labeled',
          labeledValueText:'value',
          textStyle: {
            color: 'yellow',
          }
      },
      pieSliceText: 'none',

    };

Answer 1

没有标准的配置选项可以更改单个标签的颜色。

选项 legend.textStyle 将更改所有行标签的颜色，
只是不是行数。
当前正在使用...

  legend: {
      textStyle: {
        color: 'yellow',
      }
  },

要为每个标签单独着色，首先，删除上面的选项。
然后我们可以使用默认颜色来确定文本是否...
行标签 (#222222)
或行数 (#9e9e9e)

然后我们可以通过找到标签代表的数据行索引来手动更改颜色，
使用数据表方法getFilteredRows。
一旦我们知道行索引，我们就可以使用 colors 选项来分配颜色。

        // determine data column index based on default color
        var colIndex = 0;  // row label
        if (label.getAttribute('fill') === '#9e9e9e') {
          colIndex = 1;    // row amount
        }

        // determine row index label represents
        var rowIndex = data.getFilteredRows([{
          column: colIndex,
          test: function (value) {
            switch (colIndex) {
              case 0:
                // check row label
                return (value.indexOf(label.textContent) > -1);
                break;

              case 1:
                // check row amount
                return (value === parseFloat(label.textContent));
                break;
            }
          }
        }]);

        // change color based on row index using colors in chart options
        if (rowIndex.length > 0) {
          label.setAttribute('fill', options.colors[rowIndex[0]]);
        }

注意:必须使用MutationObserver，否则图表将恢复为默认颜色，
当标签/切片悬停时。

请参阅以下工作片段...

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var container = document.getElementById('chart_div');
  var chart = new google.visualization.PieChart(container);

  var options = {
    width: 360,
    height: 200,
    chartArea: {
      height: "94%",
      width: "94%"
    },
    colors: ['#e0440e', 'green', 'red', '#f3b49f', '#f6c7b6'],
    title: 'My Daily Activities',
    pieHole: 0.6,
    legend: {
      position: 'labeled',
      labeledValueText:'value'
    },
    pieSliceText: 'none',
  };

  var data = google.visualization.arrayToDataTable([
    ['Task', 'Hours'],
    ['Moving to a new city', 25],
    ['Meeting new people', 12.5]
  ]);

  google.visualization.events.addListener(chart, 'ready', function () {
    // change label colors
    var observer = new MutationObserver(function () {
      // loop chart labels
      Array.prototype.forEach.call(container.getElementsByTagName('text'), function(label) {
        // determine data column index based on default color
        var colIndex = 0;  // row label
        if (label.getAttribute('fill') === '#9e9e9e') {
          colIndex = 1;    // row amount
        }

        // determine row index label represents
        var rowIndex = data.getFilteredRows([{
          column: colIndex,
          test: function (value) {
            switch (colIndex) {
              case 0:
                // check row label
                return (value.indexOf(label.textContent) > -1);
                break;

              case 1:
                // check row amount
                return (value === parseFloat(label.textContent));
                break;
            }
          }
        }]);

        // change color based on row index using colors in chart options
        if (rowIndex.length > 0) {
          label.setAttribute('fill', options.colors[rowIndex[0]]);
        }
      });
    });
    observer.observe(container, {
      childList: true,
      subtree: true
    });
  });

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

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