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

Highcharts：通过单击饼图切片控制显示/隐藏div

1 个答案: