如何獲取我的Highcharts餅圖中的數據標籤，這是一個字體超棒的圖標？

Question

我試圖讓高圖的餅圖工作與字體真棒（或實際上，我們有ico-moon，但我認爲技術將是相同的，所以爲了這個練習，我要用字體-awesome）。我想要數據標籤（在我的小提琴中，那些說「圖標」的標籤）實際上是圖標。我不想改變其他任何東西，因爲這個圓形圖非常完美。只需添加圖標。

有人有什麼建議可以幫忙嗎？我有unicodes可用於我和標籤。

提前致謝！

我的小提琴： http://jsfiddle.net/ewyss/z98ofd63/

$(function() { 
    var chart; 


    $(document).ready(function() { 

     Highcharts.setOptions({ 
      colors: ['#f1f1f1', '#A24130', '#A24130', '#A24130', '#A24130'] 
     }); 

     var chart; 


     // Build the chart 
     piechart = new Highcharts.Chart({ 
      chart: { 
       renderTo: 'piecontainer', 
       plotBackgroundColor: null, 
       plotBorderWidth: 0 
      }, 
      title: { 
       text: null 
      }, 
      credits: { 
       enabled: false 
      }, 
      tooltip: { 
       pointFormat: false 
      }, 
      plotOptions: { 
       pie: { 
        startAngle: -270, 
        allowPointSelect: false, 
        dataLabels: { 
         softConnector: false, 
         //if data.point.name == empty string return enabled: false, else return enabled: true... This will be the slice called slice 
         enabled: true, 
         connectorWidth: 1, 
         distance: 15, 
         style: { 
          fontFamily: 'roboto', 
          fontSize: '8pt', 
          width: 80 
         } 
        }, 
        showInLegend: false 
       } 
      }, 
      series: [{ 
       type: 'pie', 
       name: 'PPM Resource Waste', 
       data: [ 
        ['Blank', 60], 
        ['Icon 1%', 5], 
        ['Icon 15%', 15], 
        ['Icon 1%', 5], 
        ['Icon 5%', 5] 
       ], 
       animation: false 
      }] 
     }); 
    }); 
}); 

Answer 1

您可以添加數據集的內部標籤的圖標。像<i class='fa fa-times'></i>。默認情況下，任何HTML都會從您的標籤中剝離，但您可以通過設置dataLabels.useHTML至true啓用它。

總之，你就必須改變這一點：

 series: [{ 
      type: 'pie', 
      name: 'PPM Resource Waste', 
      data: [ 
       ['Blank', 60], 
       ['Icon 1%', 5], 
       ['Icon 15%', 15], 
       ['Icon 1%', 5], 
       ['Icon 5%', 5] 
      ], 
      animation: false 
     }] 

類似於這樣：

   series: [{ 
       type: 'pie', 
       name: 'PPM Resource Waste', 
       data: [ 
        ['<i class="fa fa-dollar fa-2x"></i> Blank', 60], 
        ['<i class="fa fa-save"></i> Icon 1%', 5], 
        ['<i class="fa fa-cutlery"></i> Icon 15%', 15], 
        ['<i class="fa fa-ban"></i> Icon 1%', 5], 
        ['<i class="fa fa-spinner fa-spin"></i> Icon 5% ', 5], 
       ], 
       dataLabels: { 
        useHTML: true 
       }, 
       animation: false 
      }] 

，你可以在你的更新提琴看到：http://jsfiddle.net/z98ofd63/1/