jqPlot - Pie de leyenda demasiado alto cuando hay muchos elementos de leyenda

Estoy usando jqPlot para crear un gráfico circular con una leyenda. Parte de mis opciones circulares de jqPlot se ven de la siguiente manera:

seriesDefaults: {
    renderer: $.jqplot.PieRenderer,
    rendererOptions: {
        padding: 10,
        showDataLabels: true,
        dataLabelFormatString: '%.2f%%',
        sliceMargin: 2,
        startAngle: -90
    }
},
legend: {
    show: true,
    location: 'e',
    placement: 'outside',
    xoffset: 1,
    fontSize: '11px',
    rowSpacing: '10px',
    textColor: '#222222',
    fontFamily: 'Lucida Grande, Lucida Sans, Arial, sans-serif'
}

Recientemente, me encontré con un caso en el que hay muchos elementos de leyenda (por ejemplo, 21), lo que hace que mi cuadro de leyenda sea demasiado alto. Me pregunto si hay una manera de hacerlo

  1. tener una barra de desplazamiento vertical dentro del cuadro de leyenda
  2. mostrar los elementos de la leyenda en varias columnas (preferible)

He intentado configurar las siguientes propiedades:

  • número de filas
  • númeroColumnas

que encontré en esta página:

Opciones de $.jqplot.PieRenderer

sin embargo, no parecen hacer ningún cambio.

¿Alguien podría darme una buena solución a este problema?

preguntado el 03 de mayo de 12 a las 16:05

1 Respuestas

Intente ir con la configuración de columna/fila proporcionada. Comprobé dos veces personalmente que esta configuración funciona. Solo asegúrese de que en la leyenda establezca el numberColumns or numberRows dentro rendererOptions, me gusta:

legend: { 
  show: true, 
  location: 'ne',
  rendererOptions: {numberColumns: 2}
}

Si esto no funciona, debo decir que algún otro error debe estar oculto en su código, entonces déjenos ver el código para que podamos encontrar y eliminar el error juntos :)

contestado el 04 de mayo de 12 a las 12:05

¡Ha funcionado! Tonto, estaba agregando "numberColumns" fuera de rendererOptions. ¡Gracias por tu ayuda! Muy apreciado. - jpen

No hay problema. Una vez cometí el mismo error. Ahora siempre reviso dos veces el documento y los ejemplos para estar seguro. En este caso particular del documento mismo, cree que debería ir justo debajo de la leyenda :) - Boro

¡Solo para probar!, si necesita limitar las filas, la propiedad es numberRows: legend: { show: true, location: 'ne', rendererOptions: {numberRrows: 20} } - chocho

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.