在javascript中呈現甜甜圈圖表

Question

所有我有客戶要求使用高圖表創建甜甜圈圖表，然後能夠通過移動觸摸移動事件將甜甜圈和標籤一起旋轉或圖形呈現後桌面上的鼠標移動事件。我的客戶正在使用hammer.js，jQuery和高圖表。我不知道如何去取得圓環圖旋轉。任何人都可以分享一些想法/樣本，或知道可能已經做到這一點的其他圖書館？這裏有一個高圖表樣本http://jsfiddle.net/skumar2013/nsDzn/甜甜圈圖表。任何幫助是極大的讚賞。

$(function() { 

    var colors = Highcharts.getOptions().colors, 
     categories = ['MSIE', 'Firefox', 'Chrome', 'Safari', 'Opera'], 
     name = 'Browser brands', 
     data = [{ 
       y: 55.11, 
       color: colors[0], 
       drilldown: { 
        name: 'MSIE versions', 
        categories: ['MSIE 6.0', 'MSIE 7.0', 'MSIE 8.0', 'MSIE 9.0'], 
        data: [10.85, 7.35, 33.06, 2.81], 
        color: colors[0] 
       } 
      }, { 
       y: 21.63, 
       color: colors[1], 
       drilldown: { 
        name: 'Firefox versions', 
        categories: ['Firefox 2.0', 'Firefox 3.0', 'Firefox 3.5', 'Firefox 3.6', 'Firefox 4.0'], 
        data: [0.20, 0.83, 1.58, 13.12, 5.43], 
        color: colors[1] 
       } 
      }, { 
       y: 11.94, 
       color: colors[2], 
       drilldown: { 
        name: 'Chrome versions', 
        categories: ['Chrome 5.0', 'Chrome 6.0', 'Chrome 7.0', 'Chrome 8.0', 'Chrome 9.0', 
         'Chrome 10.0', 'Chrome 11.0', 'Chrome 12.0'], 
        data: [0.12, 0.19, 0.12, 0.36, 0.32, 9.91, 0.50, 0.22], 
        color: colors[2] 
       } 
      }, { 
       y: 7.15, 
       color: colors[3], 
       drilldown: { 
        name: 'Safari versions', 
        categories: ['Safari 5.0', 'Safari 4.0', 'Safari Win 5.0', 'Safari 4.1', 'Safari/Maxthon', 
         'Safari 3.1', 'Safari 4.1'], 
        data: [4.55, 1.42, 0.23, 0.21, 0.20, 0.19, 0.14], 
        color: colors[3] 
       } 
      }, { 
       y: 2.14, 
       color: colors[4], 
       drilldown: { 
        name: 'Opera versions', 
        categories: ['Opera 9.x', 'Opera 10.x', 'Opera 11.x'], 
        data: [ 0.12, 0.37, 1.65], 
        color: colors[4] 
       } 
      }]; 


    // Build the data arrays 
    var browserData = []; 
    var versionsData = []; 
    for (var i = 0; i < data.length; i++) { 

     // add browser data 
     browserData.push({ 
      name: categories[i], 
      y: data[i].y, 
      color: data[i].color 
     }); 

     // add version data 
     for (var j = 0; j < data[i].drilldown.data.length; j++) { 
      var brightness = 0.2 - (j/data[i].drilldown.data.length)/5 ; 
      versionsData.push({ 
       name: data[i].drilldown.categories[j], 
       y: data[i].drilldown.data[j], 
       color: Highcharts.Color(data[i].color).brighten(brightness).get() 
      }); 
     } 
    } 

    // Create the chart 
    $('#container').highcharts({ 
     chart: { 
      type: 'pie' 
     }, 
     title: { 
      text: 'Browser market share, April, 2011' 
     }, 
     yAxis: { 
      title: { 
       text: 'Total percent market share' 
      } 
     }, 
     plotOptions: { 
      pie: { 
       shadow: false, 
       center: ['50%', '50%'] 
      } 
     }, 
     tooltip: { 
      valueSuffix: '%' 
     }, 
     series: [{ 
      name: 'Versions', 
      data: versionsData, 
      size: '80%', 
      innerSize: '60%', 
      dataLabels: { 
       formatter: function() { 
        // display only if larger than 1 
        return this.y > 1 ? '<b>'+ this.point.name +':</b> '+ this.y +'%' : null; 
       } 
      } 
     }] 
    }); 
}); 

Answer 1

好的，我可以用順時針旋轉+15度的按鈕（逆時針旋轉減15度）完成此操作。我們正在操縱的選項是series.options.startAngle。並不是說這需要圖表具有startAngle的明確聲明，否則您將獲得NaN。

按鈕代碼：

$('#buttonRight').click(function() { 
    var theChart = $('#container').highcharts(); 
    var currStartAngle = theChart.series[0].options.startAngle; 
    console.log('currStartAngle: ' + currStartAngle); 
    var newStartAngle = currStartAngle + 15; 
    if (newStartAngle > 359) { 
     newStartAngle = 5; 
    } 
    console.log(newStartAngle); 
    theChart.series[0].update({ 
     startAngle: newStartAngle 
    }); 
}); 

書中有一些掛羊頭賣狗肉重置startAngle爲0;如果超過359度。如果你不這樣做，它仍然會旋轉，但從標籤到切片的線條變成意大利麪條。我將它設置爲5度 - 將其設置爲適合您的用例的任何內容。

Sample code。

編輯： 要跳舞的餡餅/甜甜圈設置center PARAM以及最小化：

plotOptions: { 
     pie: { 
      center: ["50%", "50%"], 
      startAngle: 0, 
      animation: false 
     } 
    },