2012-01-09 22 views
6

¿Cómo se reduce el tamaño del gráfico circular KendoUI? Estoy usando el gráfico circular usando la siguiente configuración. Establecí los márgenes en 1 píxel y el relleno en 1 píxel, pero no parece afectar la forma en que se representa el gráfico circular. No tengo título, pero aún hay espacio para un título. Quiero poder reducir el espacio entre la parte superior del gráfico y el espacio entre la leyenda y el gráfico real.Cómo reducir el tamaño del gráfico circular KendoUI?

Mi configuración:

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 } 
     }); 
+0

podría compartir algunos de sus datos JSON? Tal vez solo una línea? –

Respuesta

17

El gráfico circular tiene 60px padding por defecto. Si necesita reducir ese espacio alrededor del gráfico circular, debe cambiar ese relleno.

... 
series: [{ 
    type: "pie", 
    field: "percentage", 
    categoryField: "source", 
    explodeField: "explode", 
    padding: 0 
}] 
... 
+0

en serio, gracias por esto! – zeroflaw

2
$("#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)#" 
    } 

}); 

aquí definimos una propiedad en ChartArea para cambiar el tamaño del gráfico circular ..

Cuestiones relacionadas