在 Kendo UI DataViz 中，如何将标签放置在饼图中答案

【问题标题】：In Kendo UI DataViz, how do I place the labels inside the pie chart在 Kendo UI DataViz 中，如何将标签放置在饼图中
【发布时间】：2013-12-09 20:48:52
【问题描述】：

请参考这个例子： http://jsfiddle.net/mcLEb/

jQuery("#grid").kendoChart(
    {
        theme: jQuery(document).data("kendoSkin") || "default",
        legend:
        {
            position: "bottom"
        },
        chartArea: {
            height: 200
        },
        seriesDefaults:
        {
            labels:
            {
                visible: true,
                format: "{0}%",
                font: "12px Arial",
                center: '5%'
            }
        },
        series: [{
            type: "pie",
            data:[70,20,10]
        }],
        tooltip:
        {
            visible: false,
            template: "${ category } - ${ value }%"
        },
        title: { padding: 1, margin: 1 },
        seriesColors: ["#d15400", "#d2d2d2","#01619e"],
        plotArea: { margin: { left: 50, right: 50 } },
    });

更多说明：现在，标签位于饼图外部，箭头指向其对应的饼图部分。我希望标签本身位于相应的饼图部分中。

我知道饼图部分可能会比其中的实际文本更小，但我会处理的。

提前致谢！

【问题讨论】：

标签： kendo-dataviz

【解决方案1】：

使用下面的代码（将位置设置为“中心”）

seriesDefaults:
    {
        labels:
        {                
            position: "center",
            visible: true,
            format: "{0}%",
            font: "12px Arial",
        }
    }

【讨论】：

【解决方案2】：

我发现最好的方法是在标签上使用 position insideEnd。

seriesDefaults:
    {
        labels:
        {                
            position: "insideEnd",
            visible: true,
            format: "{0}%",
            font: "12px Arial",
            center: '5%'
        }
    }

另一种不太可靠的方法是在标签上使用负距离属性。

 seriesDefaults:
    {
        labels:
        {                
            distance: -10,
            visible: true,
            format: "{0}%",
            font: "12px Arial",
            center: '5%'
        }
    }

【讨论】：

docs link 用于标签位置