Highcharts 自定义工具提示答案

【问题标题】：Highcharts custom tooltipHighcharts 自定义工具提示
【发布时间】：2015-09-28 19:43:32
【问题描述】：

我有一个饼图，我想根据数据项的名称向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){
                 	if(e.name == "Hydro"){
                 		return 'Hydro descript';
                 	}else if (e.name == "Wind"){
                    	return 'Wind descript';
                    }else if (e.name == "Other_Renewables"){
                    	return 'OR descript';
                    }else if (e.name == "Dual"){
                    	return 'Dual descript';
                    }else if (e.name == "Gas"){
                    	return 'Gas descript';
                    }else if (e.name == "Other_Fossil_Fuels"){
                    	return 'FF descript';
                    }else if (e.name == "Nuclear"){
                    	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.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>

【问题讨论】：

标签： javascript jquery highcharts

【解决方案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"){
                 		return 'Hydro descript';
                    } else if (this.key == "Wind"){
                    	return 'Wind descript';
                    } else if (this.key == "Other_Renewables"){
                    	return 'OR descript';
                    } else if (this.key == "Dual"){
                    	return 'Dual descript';
                    } else if (this.key == "Gas"){
                    	return 'Gas descript';
                    } else if (this.key == "Other_Fossil_Fuels"){
                    	return 'FF descript';
                    } else if (this.key == "Nuclear"){
                    	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/

【讨论】：