Question

Highcharts pie chart - offset a single slice on legend click回答标题中提出的问题，但我对此有疑问。当您单击一个图例时，会弹出相应的切片，当您单击第二个切片时，它也会与第一个一起爆炸。

我想在这里做的是，只有点击的切片会爆炸，所有其他切片都会回到原来的位置，所以一次只能有一个选定的切片。

由于我对高等教育事件不是很熟悉，所以对此方面的任何帮助都将非常感激。

$(function () {

    $(document).ready(function () {

        // Build the chart
        $('#container').highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: 'pie'
            },
            title: {
                text: 'Browser market shares January, 2015 to May, 2015'
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true,
                    point: {
                events: {
                    legendItemClick: function () {
                        this.slice();
                        /*Something should happen here to move all other slices back*/
                        return false;
                    }
                }
            }
                }
            },
            series: [{
                name: "Brands",
                colorByPoint: true,
                data: [{
                    name: "Microsoft Internet Explorer",
                    y: 56.33
                }, {
                    name: "Chrome",
                    y: 24.03,
                    sliced: true,
                    selected: true
                }, {
                    name: "Firefox",
                    y: 10.38
                }, {
                    name: "Safari",
                    y: 4.77
                }, {
                    name: "Opera",
                    y: 0.91
                }, {
                    name: "Proprietary or Undetectable",
                    y: 0.2
                }]
            }]
        });
    });
});

JSFiddle Link

Answer 1

我已设置检查是否点击了图例，其他饼图切片不应被切片。见Updated fiddle here

 point: { 
    events: { 
 legendItemClick: function () {
                        this.slice();
                  var chart = $('#container').highcharts();
                var legend = chart.legend;

            for (var i in legend.allItems) {
                var item = legend.allItems[i];
                  if(item !=this)
                      item.slice(false);                     
            } 
                        return false;
                                    }
                }
            }

Legend图标上的Highcharts Pie Slice Offset

1 个答案: