在饼图切片(Highchart)中放置标签

Placing labels inside pie chart slices (Highchart)

本文关键字：标签 Highchart 切片更新时间：2023-09-26

Using Highchart。我利用距离将标签定位在切片内，它在移动设备上很好，但在平板电脑或台式机上就不行了。当尺寸变大时，标签会离边缘太近。如何定位标签取决于视口尺寸?

plotOptions: {
    pie: {
        allowPointSelect: true,
        cursor: "pointer",
        dataLabels: {
            enabled: true,
            format: "<strong>{point.name}</strong><br>{point.percentage:.0f}%",
            distance: -60,
            color: "white"
        }
    },
series: [ {
            type: "pie",
            data: [
                {
                    name: "Not too much text here",
                    color: "#5cb85c",
                    y: 35
                },
                {
                    name: "Not too much text here",
                    color: "#5bc0de",
                    y: 30
                },
                {
                    name: "Less text here",
                    color: "#78629b",
                    y: 15
                },
                {
                    name: "Less text here",
                    color: "#f0ad4e",
                    y: 10
                },
                {
                    name: "Less text here",
                    color: "#d9534f",
                    y: 10
                }
            ]
        } ]

编辑:http://jsfiddle.net/TimNguyenBSM/rL1bwam6/1/

您可以为事先准备好的distance -选项使用一个变量。例如:

var windowSize = $(window).width();
var distance = -60;
if(windowSize > 700)
    distance -= 30;
// else if...

在你的plotOptions.pie.dataLabels中:

distance: distance