Highcharts: Control показать/скрыть div, нажав на круговые диаграммы

Question

У меня есть круговая диаграмма. То, что я пытаюсь сделать, это показать/скрыть ul при щелчке по фрагменту. Ul будет содержать дополнительные данные, уникальные для каждого отдельного среза пирога, поэтому я хочу, чтобы show/hide активировался только на его фрагменте.

Кроме того, ul может быть закрыт при нажатии, но я также хочу, чтобы он поместил свой соответствующий кусочек пирога обратно в пирог. Звучит довольно легко, но я просто не совсем уверен, как это сделать.

Я думаю, что мне нужно получить уникальный идентификатор и сопоставить его с моей функцией открытия/закрытия? Может ли кто-нибудь помочь указать мне в правильном направлении? Это объясняется достаточно хорошо?

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