如何在highchart中創建這樣的餅圖/甜甜圈圖表？

我今天剛開始使用highchart。我有以下查詢。誰能幫我？如何在highchart中創建這樣的餅圖/甜甜圈圖表？

$(function() { 

    var colors = Highcharts.getOptions().colors, 
     categories = ['HIGH', 'MODERATE', 'CRITICAL'], 
     data = [{ 
      y: 33.33, 
      color: '#a6b9c1', 
      drilldown: { 
       name: 'MSIE versions', 
       categories: ['MSIE 6.0', 'MSIE 7.0'], 
       data: [0.5, 0.5], 
       color: ['#30add9','#306885'] 
      } 
     }, { 
      y: 33.33, 
      color: '#a6b9c1', 
      drilldown: { 
       name: 'Firefox versions', 
       categories: ['Firefox v31', 'Firefox v32'], 
       data: [0.5, 0.5], 
       color: ['#30add9','#306885'] 
      } 
     }, { 
      y: 33.33, 
      color: '#a6b9c1', 
      drilldown: { 
       name: 'Chrome versions', 
       categories: ['Chrome v30.0', 'Chrome v31.0', 'Chrome v32.0'], 
       data: [0.34, 0.33, 0.33], 
       color: ['#23377b','#30add9','#306885'] 
      } 
     }], 
     browserData = [], 
     versionsData = [], 
     i, 
     j, 
     dataLen = data.length, 
     drillDataLen, 
     brightness; 


    // Build the data arrays 
    for (i = 0; i < dataLen; i += 1) { 

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

     // add version data 
     drillDataLen = data[i].drilldown.data.length; 
     for (j = 0; j < drillDataLen; j += 1) { 
      versionsData.push({ 
       name: data[i].drilldown.categories[j], 
       y: data[i].drilldown.data[j], 
       color: data[i].drilldown.color[j] 
      }); 
     } 
    } 

    // Create the chart 
    $('#container').highcharts({ 
     chart: { 
      type: 'pie' 
     }, 
     title: { 
      text: 'OUR<br>MATERIAL<br>ISSUES', 
      align: 'center', 
      verticalAlign: 'middle', 
      y: 0 
     }, 
     subtitle: { 
      text: 'Source: <a href="http://netmarketshare.com/">netmarketshare.com</a>' 
     }, 
     plotOptions: { 
      pie: { 
       shadow: false, 
       // borderWidth:10, 
       center: ['50%', '50%'], 
       slicedOffset: 10, 
       states: { 
        hover: false 
       } 
      } 
     }, 
     tooltip: { 
      enabled: false 
     }, 
     series: [{ 
      name: 'Browsers', 
      data: browserData, 
      size: '60%', 
      innerSize: '50%', 
      dataLabels: { 
       formatter: function() { 
        return this.point.name; 
       }, 
       color: '#3f377f', 
       rotation: -20, 
       // rotation: rotate(), 
       distance: -40 
      } 
     }, { 
      name: 'Versions', 
      data: versionsData, 
      // borderWidth:0, 
      size: '100%', 
      innerSize: '60%', 
      dataLabels: { 
       // useHTML:true, 
       formatter: function() { 
        return this.point.name; 
       }, 
       color: '#000' 
       //inside:true 

      }, 
      allowPointSelect: false, 
       stickyTracking: false, 
       point: { 
        events: { 
         mouseOver: function() { 
          var point = this, 
           points = this.series.points; 

          // unslice sliced element(s) 
          for (var key in points) { 
           if (points[key].sliced) { 
            points[key].slice(false); 
           } 
          } 

          // slice hovered element 
          if (!point.selected) { 
           point.slice(true); 
          } 
         } 
        } 
       }, 
       events: { 
        mouseOut: function(event) { 
         // unslice sliced element(s) 
         for (var key in this.points) { 
          if (this.points[key].sliced) { 
           this.points[key].slice(false); 
          } 
         } 
        } 
       } 
     }] 
    }); 
});

FIDDLE

在第一級中，有3個等級 - 高，關鍵和適中。如果我使用旋轉：-20 &距離：-40，它可以正確對齊關鍵標籤。我想要這種類型的對齊到所有3個標籤。任何人都可以幫助我如何做到這一點？

我也想根據附加圖像在第二級添加數據。每個數據都會有一個與之關聯的超鏈接。到目前爲止，您只能看到一個標籤 - MSIE 6和其他類似標籤，我想添加多個標籤，看起來像附加圖片。我嘗試了很多，但無法操作。 enter image description here

UPDATE - 我已經做了一些其他的事情，也使圖表響應。但我對此有幾點疑問。

是否有可能給內部標籤曲線 - HIGH，CRITICAL和MODERATE，因爲它出現在圖像中？
我在第二級圓環圖中看到了ul-li結構的信息。到目前爲止，您已經使用<br>標籤打破了這條線，但是由於該圖表也是響應式的，我們不能給div賦予寬度，因此在調整大小的情況下，如果數據出去，它將受到寬度的限制所有7片股利 - DONE
此外，還有內部的div跨度這是越來越頂部和左側自動，這就是爲什麼整個信息UL麗結構即將有所下行。是否有可能根據頭寸計算每個二級圓環圖並應用它？我無法理解動態CSS如何應用於它
ul中的每個li都會有一個鏈接。所以點擊那個李 - 我可以去那個特定的頁面 - 我嘗試應用它，但是成功了。 -

名稱：
```
<ul><li><a href="http://wikipedia.org" target="_blank">text in first line</a></li><li>second line</li><li>third line<br/>that was long</li></ul> 
```
這就像一個魅力。但是，點擊後，如果我從打開的頁面回到該頁面，切片效果仍然存在，有什麼我可以做的嗎？
在1級甜甜圈圖表上有3個標籤。但是，其中2個結構不同，1個結構不同。我不明白背後的原因。如果您可以打開開發人員工具並檢查它們，您可以清楚地看到差異。一個是<g> - <text> - <tspan>，另一個是<div> - <span>任何人都可以解釋嗎？