Как уменьшить размер круговой диаграммы KendoUI? - PullRequest
Новая
       7

Как уменьшить размер круговой диаграммы KendoUI?

6 голосов
/ 09 января 2012

Как уменьшить размер круговой диаграммы KendoUI? Я использую круговую диаграмму, используя следующую конфигурацию. Я установил поля равными 1 пикселю, а отступы - 1 пикселю, но это никак не повлияет на отображение круговой диаграммы. У меня нет названия, но еще есть место для заголовка. Я хочу иметь возможность уменьшить расстояние между вершиной диаграммы и расстоянием между легендой и реальной диаграммой.

Моя конфигурация: 

jQuery("#chart").kendoChart({
//              theme: jQuery(document).data("kendoSkin") || "Metro",
            legend: {
                position: "bottom",
                padding: 1,
                margin: 1
            },
            seriesDefaults: {
                labels: {
                    visible: true,
                    template: "${ value }%"
                }
            },
            dataSource: {
                data: <%=ChartData%>
            },
            series: [{
                type: "pie",
                field: "percentage",
                categoryField: "source",
                explodeField: "explode"
            }],
            tooltip: {
                visible: false,
                template: "${ category } - ${ value }%"
            },
            title: { padding: 1, margin: 1 },
            seriesColors: ["#d15400", "#19277e", "#e2935e", "#d2d2d2"],
            chartArea: { margin: 1 },
            plotArea: { margin: 1 }
        });

Ответы [ 2 ]

17 голосов
/ 23 февраля 2012

По умолчанию круговая диаграмма имеет 60px padding.Если вам нужно уменьшить это пространство вокруг круговой диаграммы, вам нужно изменить это заполнение. 

...
series: [{
    type: "pie",
    field: "percentage",
    categoryField: "source",
    explodeField: "explode",
    padding: 0
}]
...
2 голосов
/ 03 июня 2014 
$("#chart").kendoChart({
    theme: $(document).data("kendoSkin") || "default",
    title: {
        text: "Samplet"
    },
    seriesDefaults: {
        labels: {
            template: "#= kendo.format('{0:P}', percentage)#",
            visible: true
        }
    },chartArea: {
    width: 300,
    height: 300
},
    series: [{
        type: "pie",
        data: [{
            category: "Quality",
            value: 80},
        {
            category: "Time",
            value: 20},
        {
            category: "Cost",
            value: 40}]}],
    tooltip: {
        visible: true,
        template: "#= kendo.format('{0:P}', percentage)#"
    }

});

здесь мы определяем свойство в chartarea для изменения размера круговой диаграммы ..

...