javascript - 将标签放置在饼图切片内(Highchart)

Question

使用 Highcharts 。我使用距离将标签放置在切片内，它在移动设备上很好地居中，但在平板电脑或台式机上则不然。随着尺寸变大，标签会变得太靠近边缘。如何根据视口(viewport)尺寸定位标签？

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/

Answer 1

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

var windowSize = $(window).width();
var distance = -60;

if(windowSize > 700)
    distance -= 30;
// else if...

在你的plotOptions.pie.dataLabels中:

distance: distance