如何使高图工具提示显示在饼图之外

How to make highcharts tooltip show outside of the pie graph?

本文关键字:显示 何使高 工具提示      更新时间:2023-09-26

我正在尝试将带有图像的工具提示添加到甜甜圈饼图中。有没有一种方法可以将工具提示定位在饼图之外?

http://jsfiddle.net/jlai403/6eenxom2/4/

$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        useHTML: true,
        text: '<span style="text-align:center; top: -50px; position: relative"><h6>such pie much wow</h6><h2>79</h2></span>',
        verticalAlign: 'middle',
    },
    tooltip: {
        useHTML: true,
        pointFormat: "<img src='{point.customValue}' width='50'/>"
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                useHTML: false,
                enabled: false,
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Some Pie Chart',
        data: [
            {name: 'turtle eating strawberry', y: 25, customValue: 'http://www.tehcute.com/pics/201109/baby-turtle-eats-strawberry.jpg'},
            {name: 'red panda', y: 25, customValue: 'http://www.greenvillezoo.com/assets/img/Adopt/RedPanda.png'},
            {name: 'doge', y: 50, customValue: 'http://img2.wikia.nocookie.net/__cb20141105223610/r2d/images/7/73/Dogepic.png'}
        ],
        size: '60%',
        innerSize: '50%',
        startAngle: 0,
        endAngle: 260
    }]
});

很抱歉我没有评论的声誉,所以我在这里添加了更新的小提琴。你的意思是这样的吗?

http://jsfiddle.net/6eenxom2/6/

更新js

$(function () {
$('#container').highcharts({
    chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    title: {
        useHTML: true,
        text: '<span style="text-align:center; top: -50px; position: relative"><h6>such pie much wow</h6><h2>79</h2></span>',
        verticalAlign: 'middle',
    },
    tooltip: {
        useHTML: true,
        //pointFormat: "<img src='{point.customValue}' width='50'/>",
        formatter:function(){
        $('#tooltip').html(this.y + '<img src=' + this.point.customValue + '/>');
}
},
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
                useHTML: false,
                enabled: false,
                style: {
                    color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Some Pie Chart',
        data: [
            {name: 'turtle eating strawberry', y: 25, customValue: 'http://www.tehcute.com/pics/201109/baby-turtle-eats-strawberry.jpg'},
            {name: 'red panda', y: 25, customValue: 'http://www.greenvillezoo.com/assets/img/Adopt/RedPanda.png'},
            {name: 'doge', y: 50, customValue: 'http://img2.wikia.nocookie.net/__cb20141105223610/r2d/images/7/73/Dogepic.png'}
        ],
        size: '60%',
        innerSize: '50%',
        startAngle: 0,
        endAngle: 260
    }]
});});

使用格式化程序函数在饼图切片外部显示工具提示信息。