2012-05-29 24 views
5

Estoy usando el gráfico de líneas KendoUI. Tengo etiquetas en un gráfico de líneas y las etiquetas se cortan en la parte superior. ¿Hay alguna forma de prevenir esto?Gráfico de la línea KendoUI, ¿Cómo evitar que las etiquetas se dibujen fuera del gráfico?

KendoUI Line Graph

Aquí es un proyecto jsFiddle para jugar con: http://jsfiddle.net/rodneyhickman/2eWYg/1/

Aquí es mi marcado:

<div style="padding:20px;" > 
    <div id="divChart"></div> 
</div> 

Aquí es mi guión:

jQuery('#divChart').kendoChart({ 
seriesDefaults: { 
    type: "line", 
    missingValues: "interpolate" 
}, 
legend: { 
    position: "bottom" 
}, 
tooltip: { 
    visible: true, 
    format: "{0}%" 
}, 
valueAxis: { 
    min: 70, 
    max: 90, 
    plotBands: [{ 
     from: 70, 
     to: 75, 
     color: "#f5f5f5"}, 
    { 
     from: 80, 
     to: 85, 
     color: "#f5f5f5"}, 
    { 
     from: 90, 
     to: 95, 
     color: "#f5f5f5"}] 
}, 
series: [{ 
    type: "line", 
    name: "Product 1", 
    color: "#004990", 
    width: 1, 
    markers: { 
     background: "#004990" 
    }, 
    tooltip: { 
     visible: true, 
     template: "<b>Product 1</b><br/>Current Score: #= value #<br/>#= category # " 
    }, 
    labels: { 
     visible: true 
    }, 
    data: [88.71, 88.87, 88.91, 89.39, 89.44, 89.47, 89.39, 89.38, 89.25, 88.81, 88.9, 88.84, 88.79]}, 
{ 
    type: "line", 
    name: "Market Segment", 
    color: "#da7633", 
    width: 1, 
    markers: { 
     background: "#da7633" 
    }, 
    tooltip: { 
     visible: true, 
     template: "<b>Market Segment</b><br/>Current Score: #= value #<br/>#= category # " 
    }, 
    data: [75.9, 75.58, 75.54, 75.19, 74.9, 74.42, 74.51, 74.72, 74.55, 74.44, 74.15, 73.86, 73.79]}], 
categoryAxis: { 
    labels: { 
     rotation: -45, 
     step: 1, 
     skip: 0 
    }, 
    categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar", "Apr"] 
} 
});​ 

Respuesta

12

Mediante la adición de una margen a la trama. Hace espacio para las etiquetas.

PlotArea: { margen: { parte superior: 20, izquierda: 5, derecha: 5, parte inferior: 5 } },

Aquí está la solución:

http://jsfiddle.net/rodneyhickman/2eWYg/2/

1

Puede configurar la serie para agregar las etiquetas debajo de los puntos, según the docs;

notes: { 
    position: "bottom" 
}, 
Cuestiones relacionadas