Javascript 如何在-Donutchart Google API中更改标签颜色

正如你看到的图像，我只想根据谷歌图表中的甜甜圈弧形颜色，改变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',

    };

---

没有用于更改单个标签颜色的标准配置选项

选项

legend.textStyle

将更改所有行标签的颜色，
只是不是行数。
目前正在使用的

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

要单独为每个标签上色，请首先删除上述选项。
然后我们可以使用默认颜色来确定文本是否为…
行标签（

2222222

）
或行金额（

#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'{
软件包：['corechart']
}).然后（函数（）{
var container=document.getElementById（'chart_div'）；
var chart=newgoogle.visualization.PieChart（容器）；
变量选项={
宽度：360，
身高：200，
图表区：{
身高：“94%”，
宽度：“94%。”
},
颜色：['#e0440e'、'绿色'、'红色'、'#f3b49f'、'#f6c7b6']，
标题：“我的日常活动”，
pieHole:0.6，
图例：{
位置：'标记'，
labeledValueText:“值”
},
请输入文本：“无”，
};
var data=google.visualization.arrayToDataTable([
[‘任务’、‘小时’]，
[“搬到一个新城市”，25]，
[《结识新朋友》，12.5]
]);
google.visualization.events.addListener（图表'ready'，函数（）{
//更改标签颜色
var observer=新的MutationObserver（函数（）{
//循环图表标签
Array.prototype.forEach.call（container.getElementsByTagName（'text'）、函数（label）{
//根据默认颜色确定数据列索引
var colIndex=0；//行标签
if（label.getAttribute（'fill'）='#9e9e9e'）{
colIndex=1；//行数
}
//确定行索引标签表示的值
var rowIndex=data.getFilteredRows([{
列：colIndex，
测试：功能（值）{
开关（colIndex）{
案例0：
//检查行标签
返回值（value.indexOf（label.textContent）>-1）；
打破
案例1：
//核对行数
返回值（value==parseFloat（label.textContent））；
打破
}
}
}]);
//使用图表选项中的颜色根据行索引更改颜色
如果（rowIndex.length>0）{
label.setAttribute（'fill'，options.colors[rowIndex[0]]）；
}
});
});
观察者，观察（容器{
儿童名单：是的，
子树：真
});
});
图表绘制（数据、选项）；
});

绘制图表时，始终可以在
options
object中指定图表属性。否？我已经定义了选项属性，你能检查一下它的颜色吗？它只适用于图表弧，不适用于12.5和25