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

Question

我的问题有点难以解释，所以我在下面附上两张图片，应该可以解释 "outer color" 我想要更改的内容。

我的结果目前是标准的 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;
}

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

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

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

 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',
  }

更新

您实际上可以只更新不透明度，因为库已经为它指定了相同的颜色，请在下面找到！

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

或

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

Answer 2

sjr765 非常接近，您唯一需要做的就是以这种方式更改动态路径（在鼠标悬停时创建）的不透明度：

#donut_single path {
    stroke-opacity: 1 !important;
}

完整代码如下：

google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawChart);

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"
    };
    var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
    chart.draw(data, options);
};

#donut_single path {
    stroke-opacity: 1 !important;
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="donut_single" style="width: 300px; height: 300px;"></div>

也在 JSFiddle

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

Google Pie Chart (Doughnut) Outer Color Change On Hover

html

javascript

css

charts

google-visualization