Highcharts自定義工具提示

Question

我有一張餅圖，我想根據數據項的名稱爲tooltip部分添加自定義描述。但是我的fiddle似乎不能正常運行。

這是在Highcharts中添加自定義工具提示的正確方法嗎？

$(function() { 
 
     var dataPie =[]; 
 
    var abc =[{"name":"Dual","load":"20"},{"name":"Gas","load":"35"},{"name":"Other_Fossil_Fuels","load":"15"},{"name":"Nuclear","load":"12"},{"name":"Hydro","load":"8"},{"name":"Wind","load":"10"},{"name":"Other_Renewables","load":"10"}]; 
 
$.each(abc,function(i,el) 
 
{ 
 
    dataPie.push({name :el.name,y: parseInt(el.load)}); 
 
    
 
}); 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      plotBackgroundColor: null, 
 
      plotBorderWidth: null, 
 
      plotShadow: false, 
 
      type: 'pie' 
 
     }, 
 
     title: { 
 
      text: 'Browser market shares January, 2015 to May, 2015' 
 
     }, 
 
     tooltip: { 
 
      useHTML: true, 
 
      formatter: function() { 
 
       $.each(dataPie, function(i, e){ 
 
        \t if(e.name == "Hydro"){ 
 
        \t \t return 'Hydro descript'; 
 
        \t }else if (e.name == "Wind"){ 
 
        \t return 'Wind descript'; 
 
        }else if (e.name == "Other_Renewables"){ 
 
        \t return 'OR descript'; 
 
        }else if (e.name == "Dual"){ 
 
        \t return 'Dual descript'; 
 
        }else if (e.name == "Gas"){ 
 
        \t return 'Gas descript'; 
 
        }else if (e.name == "Other_Fossil_Fuels"){ 
 
        \t return 'FF descript'; 
 
        }else if (e.name == "Nuclear"){ 
 
        \t return 'Nuclear descript'; 
 
        } 
 
        \t return 'Other'; 
 
       }); 
 
      } 
 
     }, 
 
     plotOptions: { 
 
      pie: { 
 
       allowPointSelect: true, 
 
       cursor: 'pointer', 
 
       dataLabels: { 
 
        enabled: true, 
 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
 
        style: { 
 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
 
        } 
 
       } 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: "Brands", 
 
      colorByPoint: true, 
 
      data: dataPie 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

Answer 1

你非常接近！我們可以通過使用this.key來獲取圖表當前被隱藏的部分的密鑰，而不是遍歷每個元素。

這裏是一個固定的工作現場演示：

$(function() { 
 
     var dataPie =[]; 
 
    var abc =[{"name":"Dual","load":"20"},{"name":"Gas","load":"35"},{"name":"Other_Fossil_Fuels","load":"15"},{"name":"Nuclear","load":"12"},{"name":"Hydro","load":"8"},{"name":"Wind","load":"10"},{"name":"Other_Renewables","load":"10"}]; 
 
$.each(abc,function(i,el) 
 
{ 
 
    dataPie.push({name :el.name,y: parseInt(el.load)}); 
 
    
 
}); 
 
    $('#container').highcharts({ 
 
     chart: { 
 
      plotBackgroundColor: null, 
 
      plotBorderWidth: null, 
 
      plotShadow: false, 
 
      type: 'pie' 
 
     }, 
 
     title: { 
 
      text: 'Browser market shares January, 2015 to May, 2015' 
 
     }, 
 
     tooltip: { 
 
      useHTML: true, 
 
      formatter: function() { 
 
        if(this.key == "Hydro"){ 
 
        \t \t return 'Hydro descript'; 
 
        } else if (this.key == "Wind"){ 
 
        \t return 'Wind descript'; 
 
        } else if (this.key == "Other_Renewables"){ 
 
        \t return 'OR descript'; 
 
        } else if (this.key == "Dual"){ 
 
        \t return 'Dual descript'; 
 
        } else if (this.key == "Gas"){ 
 
        \t return 'Gas descript'; 
 
        } else if (this.key == "Other_Fossil_Fuels"){ 
 
        \t return 'FF descript'; 
 
        } else if (this.key == "Nuclear"){ 
 
        \t return 'Nuclear descript'; 
 
        } 
 
        return 'Other'; 
 
      } 
 
     }, 
 
     plotOptions: { 
 
      pie: { 
 
       allowPointSelect: true, 
 
       cursor: 'pointer', 
 
       dataLabels: { 
 
        enabled: true, 
 
        format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
 
        style: { 
 
         color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
 
        } 
 
       } 
 
      } 
 
     }, 
 
     series: [{ 
 
      name: "Brands", 
 
      colorByPoint: true, 
 
      data: dataPie 
 
     }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://code.highcharts.com/highcharts.js"></script> 
 
<script src="https://code.highcharts.com/modules/exporting.js"></script> 
 

 
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

的jsfiddle版本：http://jsfiddle.net/ng1kvmxh/16/