Question

使用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/

Answer 1

您可以使用预先准备的distance选项的变量。例如：

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

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

在您的plotOptions.pie.dataLabels：

中

distance: distance

将标签放置在饼图切片内（Highchart）

1 个答案: