하이 차트 : 원형 차트 조각을 클릭하여 div 표시/숨기기 제어

Question

원형 차트가 있습니다. 내가 뭘 하려는지 슬라이스를 클릭하면 ul 표시/숨기기입니다. ul에는 각 파이 조각에 고유 한 추가 데이터가 포함되어 있으므로 슬라이스에만 표시/숨기기를 활성화하고 싶습니다.

또한 ul은 클릭 할 때 닫을 수 있지만 해당 원형 조각을 다시 파이에 넣기를 원합니다. 쉬운 소리는 들리지만 어떻게 확신 할 수는 없습니다.

고유 ID를 가져 와서 공개/닫기 함수에 매핑해야한다고 생각합니다. 누군가가 올바른 방향으로 나를 도와 줄 수 있습니까? 이것이 충분히 설명 되었습니까?

HTML :

<ul class="chart_data"> 
    <li>one</li> 
    <li>two</li> 
    <li>three</li> 
    <li id="hide">close table</li> 
</ul> 

차트 코드 :

plotOptions: { 
     pie: { 
      point: { 
       events: { 
        legendItemClick: function() { 
         show_table(); 
         this.select(); 
         chart2.tooltip.refresh(this); 
         return false; 
        } 
       } 
      }, 
      allowPointSelect: true, 
      cursor: 'pointer', 
      dataLabels: { 
       enabled: false 
      }, 
      showInLegend: true, 
      slicedOffset: 40 
     }, 
     series :{ 
      point: { 
       events: { 
        click: function() { 
         show_table(); 
        }, 
       }, 
      }, 
     }, 
    }, 

및 표시/숨기기 기능 :

function show_table() { 
    $('.chart_data').toggle('slow'); 
    // there is other irrelevant stuff to this function, styling of the ul, etc. 
}; 

$('#hide').click(function() { 
    $('.chart_data').hide('slow'); 
}); 

Answer 1

가 선택하여 조각을 취소 할 수 있습니다

chart.series[0].data[index].select(); 

여기서 index은 조각의 순서를 나타냅니다.

example