Question

请参阅以下示例：

是否有任何设置可以更准确地放置标签而无需单独调整？

Firefox应该更多，其他人应该更加正确......

代码：

＆＃13;

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        plotOptions: {
            pie: {
                dataLabels: {
                    connectorWidth: 12,
                    style : {
                    fontSize: 25
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox', 45.0],
                ['IE', 26.8],
                ['Safari', 8.5],
                ['Opera', 6.2],
                ['Others', 0.7]
            ]
        }]
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

＆＃13;

Answer 1

我总是发现饼图（以及极地和蜘蛛）图表的标签定位难以管理。根据您的数据和您想要的格式，根据您的喜好，他们可能非常挑剔和不守规矩。

我建议完全删除这些标签并改为使用传奇。我已经用这个概念更新了你的代码片段。

请告诉我这是否对您有所帮助！

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Browser market shares at a specific website, 2014'
        },
        legend: {
            enabled: true,
            borderWidth: 1,
            borderColor: 'gray',
            align: 'center',
            verticalAlign: 'top',
            layout: 'horizontal',
            x: 0, y: 50
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: { enabled: false },
                showInLegend: true
            }
        },
        series: [{
            type: 'pie',
            name: 'Browser share',
            data: [
                ['Firefox', 45.0],
                ['IE', 26.8],
                ['Safari', 8.5],
                ['Opera', 6.2],
                ['Others', 0.7]
            ]
        }]
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px"></div>

Highcharts：饼图标签位置

1 个答案: