Google饼图（甜甜圈）悬停时外部颜色变化

Question

我的问题有点难以解释，因此我在下面附加了两个图像，这些图像应解释我要更改的“外部颜色”。

我的结果目前是标准的Google图表行为。当我将鼠标悬停在切片上时，在切片的外部会得到该颜色的半透明变体。

Google Chart Hover Color Standard Behavior

我想使透明的灰色与切片的颜色相同，就像这样：

Desired Google Chart Color Behavior

外面的人知道这是否可行吗？我仔细阅读了文档，但是缺少此配置选项，或者它根本不存在。谢谢！

也可以在这里找到我当前的代码：

function drawChart() {
var data = google.visualization.arrayToDataTable([
    ['Savings Category', 'Savings'],
    ['Trade Savings', 11],
    ['Shipping Savings', 20],
    ['Bulk Savings', 12],
    ['Promo Savings', 12],
]);

var options = {
    pieHole: 0.8,
    legend: 'none',
    height: '100%',
    width: '100%',
    pieSliceText: 'none',
    backgroundColor: '#f8f5f3',
    colors: ['#0066a6', '#54c0e8', '#cccccc', '#818181'],
    chartArea: {
        height: '90%',
        width: '90%',
    },
    slices: [{offset: 0.05}, {offset: 0.05}, {offset: 0.05}, {offset: 0.05}],
    tooltip: {
        trigger: 'selection'
    },
    pieResidueSliceColor: "yellow"
};

Answer 1

我能够通过以下CSS技巧解决此问题！

path[stroke-width="6.5"] {
  stroke: #818181;
  stroke-opacity: 1;
}

然而，这将使每个边框具有相同的颜色，因此，基于较大的代码集，我能够根据通过chart事件选择的元素，使用jquery动态更改边框的颜色。 jQuery选择器在这里：

$("path[stroke-width='6.5']").css({
        "stroke": colors[currSlice[0]],
        "stroke-opacity": "1",
      })

它是基于此硬编码对象的动态对象，该对象与chart事件给定的输入行数据相匹配。

 var rows = [
    ['Savings Category', 'Savings'],
    ['TradeMaster Savings', 11,],
    ['Shipping Savings', 20],
    ['Bulk Savings', 12],
    ['Promo Savings', 12],
  ];

  var colors = {
    "TradeMaster Savings": '#0066a6',
    "Shipping Savings": '#54c0e8',
    "Bulk Savings": '#cccccc',
    "Promo Savings": '#818181',
  }