javascript - 谷歌饼图( donut )悬停时外部颜色变化

Question

我的问题有点难以解释，所以我在下面附上两张图片，它们应该可以解释我要更改的“外部颜色”。

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

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

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 上