Question

这是饼图的小提琴。

在悬停切片时，它会显示滑动值。

我可以提醒悬停的滑动值吗？

实际上我的目的是在悬停或点击切片事件时显示该切片的另一个PIE图表。

$(function () {
    $('#container').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: 1,//null,
            plotShadow: false
        },
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        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: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox',   45.0],
                ['IE',       26.8],
                {
                    name: 'Chrome',
                    y: 12.8,
                    sliced: true,
                    selected: true
                },
                ['Safari',    8.5],
                ['Opera',     6.2],
                ['Others',   0.7]
            ]
        }]
    });
});

Answer 1

是的，你可以做到。

在工具提示中你有formatter这将允许你有一个javascript方法来做你自己的东西当一个点悬停在图表上。

formatter: function(){
    //your stuff here
}

以下是您的工作示例：http://jsfiddle.net/XZvuL/

希望这就是你要找的东西。

Answer 2

试试这个

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'
                    }
                },
                point: {
                    events: {
                        mouseOver: function (event) {
                            var point = this;

                            alert(this.percentage)
                        }
                    }
                }
            }
        },

DEMO

点击活动

point: {
                    events: {
                        click: function (event) {
                            var point = this;

                            alert(this.percentage)
                        }
                    }
        }

DEMO

图形悬停时的警报值

2 个答案: