javascript - ハイチャート: 円グラフのスライスをクリックして、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');
});