2015-10-20 87 views
0

Highcharts pie chart - offset a single slice on legend click回答了标题提出的问题,但我对此的问题。当你点击一个传说,对应的片弹出,当你点击第二个,这也与第一个一起爆炸。Highcharts饼片偏移的传奇点击

我想在这里做的是,只有点击切片爆炸和其他所有片回到原来的位置,从而只能有一次一个选择的切片。

在这方面的任何帮助将因为我不是很熟悉highchart事件不胜感激..

$(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

回答

0

我设置了一个检查,如果传说是点击其他的圆形切片不该”切片。 见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; 
            } 
       } 
      }