Highcharts：一個div的控制顯示/隱藏通過單擊餅圖切片

Question

我有一個餅圖。我所試圖做的是顯示/隱藏在點擊的切片的UL認證。該UI將包含因人而異圓形切片額外的數據，所以我想顯示/隱藏激活只能在它的切片。

此外，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