Highchart js點擊旋轉並展開圓弧

Question

您好我正在尋找創建一個餅圖與高圖表擴展twolayers js，並旋轉到中心，只要我點擊一節。

到目前爲止，我有一個餅圖可以擴展一個圖層和一個點擊函數，以圓弧爲中心（-90）。我還有一個點擊功能，可以逐個旋轉餡餅。我的內弧停留在中心，我很難將弧移動到外環的相同位置。內弧不跟隨點擊旋轉。

我想製作一個平滑旋轉到中心（-90）並用兩個額外層擴展的餅圖。與內拱跟隨外拱和在同一起點爲外拱

預先感謝您

這裏是我的代碼進行什麼活動，看起來像：

pie chart with what im currently running

這裏是我的腳本

$(function() { 

    var lastHighlight = -1; 
    var lastPos = [10,10,10]; 
    $('#mouseMoveDiv').click(function() { 
     var theChart = $('#container').highcharts(); 
     var currStartAngle = theChart.series[0].options.startAngle; 
     //console.log('currStartAngle: ' + currStartAngle); 
     var newStartAngle = currStartAngle + 5; 
     if (newStartAngle > 359) { 
      newStartAngle = 5; 
     } 
     //console.log(newStartAngle); 
     theChart.series[0].update({ 
      startAngle: newStartAngle 
     }); 
     var someData = theChart.series[0].data; 
     var N = someData.length; 
     var highLight = -1; 
     for (var i = 0; i < N; i++){ 
      var startAngle = someData[i].angle + (((someData[i].percentage/100) * 6.28318)/2); 
      var dis = 1.5795 - startAngle; 
      if (lastPos[i] > 0 && dis < 0){ 
       highLight = i; 
       lastPos[i] = dis; 
       break; 
      } 
      lastPos[i] = dis; 
     } 
     if (highLight != -1){ 
      var someRows = $('#dataTable tr'); 
      someRows.eq(lastHighlight).css('backgroundColor','white'); 
      someRows.eq(highLight).css('backgroundColor','yellow'); 
      lastHighlight = highLight; 
     } 
    }); 



    $('#container').highcharts({ 







     chart: { 
      type: 'pie', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 

     plotOptions: { 
      series: { 
       dataLabels: { 
        enabled: true, 
        format: '{point.name}', 
        center: ["50%", "50%"], 
        connectorWidth: 0, 
        startAngle: 90, 
        animation: false 
       } 
      } 
     }, 

     exporting: { 
      enabled: false 
     }, 
     tooltip: { 
      enabled: false 
     }, 
     credits: { 
      enabled: false 
     }, 
     title: { 
      text: null 
     }, 




     series: [{ 
      type: 'pie' 
      data: [ 
       { name: 'Planning', y: 33.3 }, 
       { name: 'Sprints', y: 33.3 }, 
       { name: 'Release', y: 33.3 } 
      ], 

      size: '60%', 
      innerSize: '40%', 
      point: { 
       events: { 
        click: function() { 
         var chart = this.series.chart, 
           series = chart.series, 
           len = series.length, 
           index = this.x + 1, 
           i; 
         for (i = 1; i < len; i++) { 
          if (i === index) { 
           series[i].update({ 
            size: '100%', 
            dataLabels: { 
             enabled: true 
            } 
           }, false); 
          } else { 
           series[i].update({ 
            size: '0%', 
            dataLabels: { 
             enabled: false 
            } 
           }, false); 
          } 
         } 
         var points = this.series.points; 
         var startAngle = 0; 
         for (var i = 0; i < points.length; i++) { 
          var p = points[i]; 
          if (p == this) { 
           break; 
          } 
          startAngle += (p.percentage/100.0 * 360.0); 
         } 
         this.series.update({ 
          startAngle: -startAngle + 90 - ((this.percentage/100.0 * 360.0)/2) // center at 180 
         }) 
         chart.redraw(); 
        } 

       } 
      }, 
      dataLabels: { 
       distance: 90, //distance name 
       style: { 
        color: 'Black' 
       }, 
       enabled: true 
      }, 

      zIndex: 1 
     }, 

      { 
       zIndex: 0, 
       type: 'pie', 
       size: '60%', 
       innerSize: '0%', 


       data: [{ 
        y: 2, 
        color: 'rgba(250,0,0,1)', 
        name: 'Training' 

       }, 
        { 
        y: 2, 
        color: 'rgba(250,0,0,1)', 
        name: 'Secure' 
       }, 
        { 
        y: 8, 
        color: 'rgba(0,0,0,0)', 
        dataLabels: { 
         enabled: false 
        } 

       }], 
       dataLabels: { 
        distance: -30, 
        enabled: false, 
        style: { 
         color: 'black' 
        } 
       }, 
       enableMouseTracking: false 
      }, 


      { 
       zIndex: 0, 
       type: 'pie', 
       size: '0%', 
       data: [{ 
        y: 3, 
        color: 'rgba(0,0,0,0)', 
        dataLabels: { 
         enabled: false 
        } 
       }, { 
        y: 1, 
        color: 'rgba(0,200,0,1)', 
        name: 'test' 
       }, { 
        y: 1, 
        color: 'rgba(0,200,0,1)', 
        name: 'test' 
       }, { 
        y: 1, 
        color: 'rgba(0,200,0,1)', 
        name: 'test' 
       }, { 
        y: 3, 
        color: 'rgba(0,0,0,0)', 
        dataLabels: { 
         enabled: false 
        } 
       }], 
       dataLabels: { 
        distance: -30, 
        enabled: false 
        style: { 
         color: 'black' 
        } 
       }, 
       enableMouseTracking: false 
      }, 


      { 
       zIndex: 0, 
       type: 'pie', 
       size: '0%', 
       data: [{ 
        y: 6, 
        color: 'rgba(0,0,0,0)', 
        dataLabels: { 
         enabled: false 
        } 
       }, { 
        y: 1, 
        color: 'rgba(0,0,200,1)', 
        name: 'test' 
       }, { 
        y: 1, 
        color: 'rgba(0,0,200,1)', 
        name: 'test' 
       }, { 
        y: 1, 
        color: 'rgba(0,0,200,1)', 
        name: 'test' 
       }], 
       dataLabels: { 
        distance: -30, 
        enabled: false, 
        style: { 
         color: 'black' 
        } 
       }, 
       enableMouseTracking: false 
      }] 
    }); 
}); 

Answer 1

我建議改變的邏輯一點：使用一個系列的每個圈子，和手動管理相反切片的可見性。例如：http://jsfiddle.net/vkhvvs5d/3/

並回答第二個問題，旋轉動畫，不支持使用series.update()時，但它有一個簡單的解決方法：http://jsfiddle.net/8x54efu6/3

var chart = $("#container").highcharts(), 
    pie = chart.series[0]; 

pie.options.startAngle = new_angle; 
pie.isDirty = pie.isDirtyData = true; 

chart.redraw();