Highcharts 3D饼图中tooltip如何显示出数量

分类:计算机 | 前端 | HighCharts 158
更新:2021-03-01 20:43:03
编辑

代码

var chart = Highcharts.chart('container', {
    chart: {
        type: 'pie',
        options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
        }
    },
    title: {
        text: '2014年某网站不同浏览器访问量占比'
    },
    tooltip: {
        pointFormat: '数量:{point.y}<br/>{series.name}: {point.percentage:.1f}%'
    },
    plotOptions: {
        pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            depth: 35,
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }
    },
    series: [{
        type: 'pie',
        name: '浏览器占比',
        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]
        ]
    }]
});

Highcharts饼图加载数据时,可以直接加载数量值,饼图控件会自动将数量转换为百分比;如果想要在tooltip中显示饼图每一块的数值,从加载数据的语句可以看出,y就是分析项的实际数值,因此可以通过point.y取到该值

效果