Question

除了在图例中单击的颜色饼图切片外，我想将饼图切片的所有颜色设置为灰色。我只能弄清楚如何只改变点击的图例项而不是其他项的颜色。

我已经尝试将id设置为数据点并使用e.target，但是没有提供正确的访问权限。

感谢您的帮助。

这是我的myFiddle。

$(document).ready(function () {
    var myCharts = {
        chart: {
            renderTo: 'container',
            type: 'pie',
            backgroundColor: 'rgba(255, 255, 255, 0.1)',
            borderColor: 'rgba(255, 255, 255, 0.1)',
            margin: [38, 20, 20, 20],
            width: 300,
            height: 300,
            shadow: true,
        },
        colors: [
            '#0066FF',
            '#33CC33',
            '#FF0000',
            '#FFFF00',
        ],
        credits: {
            enabled: false
        },
        legend: {
            layout: 'horizontal',
            align: 'center',
            verticalAlign: 'top',
            x: 0,
            y: 0
        },
        title: {
            text: 'Net Activations',
            verticalAlign: 'bottom',
            y: 10
        },
        subtitle: {
            text: '7%',
            verticalAlign: 'middle',
            y: 30,
            style: {
                color: 'black',
                fontSize: '40px'
            }
        },
        yAxis: {
            tickColor: '#FF0000',
            tickWidth: 3,
            tickInterval: 5
        },
        xAxis: {
            tickColor: '#FF0000',
            tickWidth: 3,
            tickInterval: 5
        },
        plotOptions: {
            pie: {
                states: {
                    hover: {
                        enabled: false
                    }
                },
                point: {
                    events: {
                        legendItemClick: function () {
                            this.graphic.attr({
                                fill: '#CCCCCC'
                            });
                            return false
                        }
                    }
                },
                dataLabels: {
                    enabled: true,
                    distance: 0.1,
                    color: 'black',
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
                    },
                },
                innerSize: '60%',
                shadow: true,
                size: '100%',
                allowPointSelect: true,
                slicedOffset: 10,
            }
        },
        tooltip: {
            enabled: false
        },
        series: [{
            data: [],
            showInLegend: true,
        }]
    };
    myCharts.chart.renderTo = 'container';
    myCharts.title.text = 'Net Activations';
    var actual = 52,
        goal = 73 - actual,
        ATB = 100 - goal - actual;
    myCharts.series[0].data = [{
        name: 'Actual',
        y: actual,
        id: 0
    }, {
        name: 'goal',
        y: goal,
        id: 1
    }, {
        name: 'ATB',
        y: ATB,
        id: 2
    }];
    new Highcharts.Chart(myCharts);
});

Answer 1

不是直接使用this.graphic.attr攻击SVG，而是最好使用API来更新切片。 Point.update适用于此：

legendItemClick: function () {
    var series = this.series;
    for (var i=0; i < series.data.length; i++){
        var point = series.data[i];
        if (point == this){
            // set back to old color
            point.update({color: series.chart.options.colors[this.id]});
        }else{
            // make it gray
            point.update({color: '#CCCCCC'});
        }
     }
     return false;
 }

更新了小提琴here。

Answer 2

好吧，我可以在50％的路上找到你：

point: {
   events: {
       click: function () {
           if (event.point.sliced) {
               $.each(this.series.data, function (i, e) {
                   if (!e.sliced) {
                       this.graphic.attr({
                           fill: '#CCCCCC'
                       });
                   }
               });
           }
        }
    }

当您重新单击切片以将其重新插入时，这仍然会中断 - 其他切片的颜色仍为灰色，直到您单击它们为止。需要更多地了解这一点。

点击Pie Slice Legend时设置不同点的颜色

2 个答案: