javascript - Highcharts 饼图悬停时不透明度发生变化

标签 javascript php jquery highcharts

我有一个饼图,其功能现在运行良好。问题在于它的显示。当我将鼠标悬停在饼图的一个部分上时,饼图其他部分的不透明度变低。如下所示 enter image description here

我的脚本在这里:

<script type="text/javascript">

var data = <?php echo json_encode($json_data) ?>

data.forEach(function(el) {
el.name = el.label;
el.y = Number(el.value);
});

Highcharts.chart('userpie', {
chart: {
    plotBackgroundColor: null,
    plotBorderWidth: null,
    plotShadow: false,
    type: 'pie'
},
title: {
    text: undefined
},
credits: {
  enabled: false
},
exporting: { enabled: false } ,
tooltip: {
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: 'pointer',
         showInLegend: true,
        dataLabels: {
            enabled: true,
            format: '<b>{point.name}</b>: {point.percentage:.1f} %',
            style: {
                color: (Highcharts.theme && 
Highcharts.theme.contrastTextColor) || 'black'
            }
        }

    }
},
series: [{
    name: 'Users',
    colorByPoint: true,
    data: data
}]
});
</script>

我错过了什么吗?请帮忙。提前致谢

最佳答案

您可以在非事件状态下更改opacity属性:

plotOptions: {
    pie: {
        states: {
            inactive: {
                opacity: 1
            }
        },
        ...
    }
}

现场演示:http://jsfiddle.net/BlackLabel/05qwthgz/

API引用:https://api.highcharts.com/highcharts/series.pie.states.inactive.opacity

关于javascript - Highcharts 饼图悬停时不透明度发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55471665/

相关文章:

javascript - 在两点之间绘制假想路径并沿该路径打印图像?

javascript - 这个按钮是怎么回事?

javascript - Yii2:如何使用Ajax获取数组对象?

php - 使用多个 MySQL 行和 For Loop - 不工作

javascript - 在 jQuery/JS 中使用正则表达式从价格格式的字符串中提取 float

javascript - ";"怎么会是意外的token呢? ( react /巴别塔)

php - 如何从php中的任何div获取数据或值

php - 将旧表结构迁移到新发现的枚举不起作用

javascript - Vue.js:使用 JS 虚拟键盘时,V 模型输入未更新

javascript - 表单序列化总是返回空字符串