Как изменить цвет среза в диаграмме пончика на щелчке ломтика?

Question

мы можем изменить срез цвет кольцевой диаграммы, когда пользователь нажимает .Я хочу серым цветом все ломоть кроме выбранного одного ..can мы серому все кусочки, когда пользователь нажмите/выбрать любой кусочек .. Другими словами

у меня есть четыре цвета синий, черный, зеленый, оранжевый ..When я нажимаю на синий он показывает синий остальные серые ..when я clcik на черном это показать черный остаток серого цвета .Здесь мой код

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

Вам необходимо пройти через seri и через точки и изменить свой цвет с помощью 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/