В Kendo UI DataViz, как разместить метки внутри круговой диаграммы

См. Этот пример: 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
person Brian    schedule 09.12.2013    source источник

Ответы (2)


arrow_upward
8
arrow_downward

используйте приведенный ниже код (установите позицию как "центр")

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

arrow_upward
4
arrow_downward

Лучший способ, который я нашел для этого, - использовать на этикетках позицию 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%'
        }
    }
person Dodecapus    schedule 10.02.2014
comment
ссылка на документы для позиции метки - person reergymerej; 28.04.2015