单击切片时如何更改圆环图中的切片颜色？

Question

当用户单击时，我们可以更改圆环图的切片颜色吗？我想将除选定的切片以外的所有切片变灰。当用户单击时，我们可以将所有切片变灰吗？ 单击/选择任何切片.. 换句话说

我有四种颜色蓝色，黑色，绿色，橙色..当我点击蓝色时，它显示蓝色其余部分是灰色..当我点击黑色时，它显示黑色其余部分是灰色。这是我的代码

http://jsfiddle.net/nyhmdtb8/5/

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'pie'
    },

    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    legend: {

      symbolHeight: 1,
      symbolWidth: 1,
      symbolRadius: 0,
      useHTML: true,
      align: 'right',
      verticalAlign: 'top',
      itemWidth: 100,
      layout: 'vertical',
      x: 0,
      y: 100,
      labelFormatter: function() {

        return '<div style="padding:5px;width:55px;background-color:' + this.color + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
      }
    },
    yAxis: {
      title: {
        text: 'Total percent market share'
      }
    },
            plotOptions: {
          pie: {

                  showInLegend: true,
                         dataLabels: {
                        format: '<b>{point.y}</b>',

                        style: {
                            fontWeight: 'bold',
                            color: 'white'
                        }
                    },
            point: {
                events: {
                    legendItemClick: function (e) {
                    return false;
                  },
                  click:function(e){
                  console.log(this.points)
                   console.log(e);
                    this.graphic.attr({
                fill: 'yellow'
            });
                  //return false;
                  }
                }
              },
                   startAngle: 0,
                  endAngle: 270,
            }
            },
    tooltip: {
      enabled: false,
      shadow: false
    },
    series: [{
      states: {
        hover: {
          enabled: false
        }
      },
      showInLegend: false,
      name: 'election result',
      enabled: true,
      dataLabels: {
        enabled: true
      },
      data: [
        ['A', 55],
        ['B', 65],

      ],
      size: '30%',
      innerSize: '70%',
    }, {
      states: {
        hover: {
          enabled: false
        }
      },
      name: 'Versions',
      data: [
        ['sdsd', 55],
        ['sdf', 65],
        ['sdf', 65],
        ['sdf', 132],

      ],
      size: '70%',
      innerSize: '80%',

    }]
  });
});

Answer 1

您必须遍历系列和点并使用Point.update() 更改其颜色。如果你使用point.graphic.attr(fill: 'grey')，那么svg元素和js对象就不会同步了。

在加载事件时，保留切片的原始颜色：

chart: {
  type: 'pie',
  events: {
    load: function () {
      this.series.forEach(series => {
        series.points.forEach(point => {
          point.options.origColor = point.color;
        });
      });
    }
  }
},

点击时，根据点击点改变颜色。

click: function(e) {
          console.log(this)
          console.log(e);

          this.series.chart.series.forEach(series => {
            series.points.forEach(point => {
              point.update({
                color: this !== point ? 'grey' : point.options.origColor
              }, false, false);
            });
          })
          this.series.chart.redraw();
        }

最后一个，修改图例格式器，如果你不想改变它的颜色

 labelFormatter: function() {

    return '<div style="padding:5px;width:55px;background-color:' + (this.options.origColor || this.color) + '"><span style="color: #ffffff;">' + this.name + ': <b>' + this.y + '</b> </span></div> </n>';
  }

示例：http://jsfiddle.net/zwawuem9/

更改图例颜色的示例：http://jsfiddle.net/zwawuem9/1/