파이 슬라이스를 클릭하면 다른 점의 색 설정 범례

Question

전설에서 클릭 한 파이 조각을 제외하고 파이 조각의 모든 색을 회색으로 설정하고 싶습니다. 다른 사람들이 아닌 클릭 한 범례 항목 만 색을 변경하는 방법을 알아 냈습니다.

데이터 포인트에 ID를 설정하고 e.target을 사용했지만 올바른 액세스를 제공하지 못했습니다.

도움 주셔서 감사합니다.

여기 내 결과는 myFiddle입니다. 다른 조각의 색상이 - 당신은 다시 그것을 슬롯 슬라이스를 다시 클릭 할 때이 여전히 나누기

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

:

$(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 %를 얻을 수 있습니다 당신이 그들을 클릭 할 때까지 여전히 회색. 더 자세히 살펴 봐야합니다.