javascript - Highcharts 自定义工具提示

Question

我有一个饼图，我想根据数据项的名称将自定义描述添加到工具提示部分。然而我的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>

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"){
                 		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/