Jquery 单击此按钮时零件的颜色

如何修改此代码，以便每次选择时都能看到使用相同颜色选择的部分？我想这是黄色的，只有当我将点击这个

代码：

  $(function () {

            Highcharts.theme = {
            colors: ['#242c4a'],
            chart: {
             width: 350,
                backgroundColor: {
                    linearGradient: [0, 0, 500, 500],
                    stops: [
                        [0, 'rgb(255, 255, 255)'],
                        [1, 'rgb(240, 240, 255)']
                    ]
                }, 
            },

        };

        // Apply the theme
        Highcharts.setOptions(Highcharts.theme);

        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Our Projects'
            },

            plotOptions: {

                pie: {


                    borderColor: '#48588c',
                    borderWidth: 7,
                     slicedOffset: 10,                     
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false

                    }

                },

                series: {

                point: {
                    events: {
                        select: function() {

                        }
                    }
                }
            }


            },
              series: [{
                type: 'pie',
                name: 'Browser share',
                dashStyle: 'LongDashDotDot',
                data: [
                    ['Firefox',   45.0],
                    ['IE',       26.8],
                    {
                        name: 'Chrome',
                        y: 12.8,
                        sliced: true,
                        selected: true
                    },
                    ['Safari',    8.5],
                    ['Opera',     6.2],
                    ['Others',   0.7]
                ]
            }]
        },

         function(chart) { // on complete


        var renderer = new Highcharts.Renderer(
            $('#container')[0],  50, 50);

        chart.renderer.circle(175, 216, 22).attr({
            fill: '#e7e620',

            'stroke-width': 5,
            zIndex: 3
        }).add();
        }



        );
    });

看这把小提琴：

您需要启用allowPointSelect，然后为select状态添加颜色。因为您正在执行mouseOver和mouseOut操作，所以需要进行一些修改以保持选定的颜色

    plotOptions: {

        series: {
            allowPointSelect : true,
            slicedOffset: 0,
            states: {
                select: {
                    color: 'yellow'
                },
                hover: {
                    enabled: false
                }
            },
            point: {
                events: {
                    mouseOver: function () {
                        this.graphic.attr({
                            fill: 'red'
                        });
                    }
                }
            },
            events: {
                mouseOut: function () {
                    var serie = this.points;

                    $.each(serie, function (i, e) {
                        if (!this.selected) {                                    
                            this.graphic.attr({
                                fill: '#CCCCCC'
                            });
                        }
                        else {
                             this.graphic.attr({
                                fill: 'yellow'
                            });
                        }
                    });
                }
            }
        }
    },

---

这可能是你真正想要的。但根据你的要求，这把小提琴给了你：

您可以将其更改为单击事件，而不是鼠标悬停事件：

point: {
    events: {
        click: function () {
            this.graphic.attr({
                fill: 'yellow'
            });
        }
    }
},

当然，一旦你搬走，mouseOut事件会让颜色消失，但我不确定这是否是你想要的，因为你没有提到

编辑：此小提琴保留黄色，直到取消选择（或选择另一个）：

---

你是说你不想在悬停时改变颜色，你只想在单击时改变颜色？另外，您希望单击时所有的块都是相同的颜色（黄色），还是希望每个块都是自己的颜色？我希望我单击的块是黄色，其他块不变。谢谢您的建议，但是我如何保持所选的颜色？此代码在鼠标离开后将其返回到所选的颜色。你想它是黄色的，即使在鼠标上方？如果是，请将If（！this.selected）添加到鼠标悬停代码中，以不更改选定块的颜色。即使鼠标光标不在饼图上，我也希望保留颜色。切片偏移：0-防止饼图切片滑出！我没有注意到这个选项。我更新了我的答案以包含它。谢谢

allowPointSelect: true,
slicedOffset: 0,
point: {
    events: {
        select: function () {
            this.update({color: 'yellow'});
        },
        unselect: function () {
            this.update({color: '#CCCCCC'});
        }
    }
}