jqPlot - Pie legend too tall when there are many l

问题:

I'm using jqPlot to create a pie chart with a legend. Part of my jqPlot pie options look as follows:

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'
}

Recently I've come across a case where there are many legend items (e.g., 21), which makes my legend box too tall. I'm wondering if there is a way to either

1. have a vertical scroll bar within the legend box
2. display the legend items in multiple columns (preferable)

I've tried setting the following properties:

• numberRows
• numberColumns

which I found from this page:

$.jqplot.PieRenderer options

however they don't seem to make any changes.

Would anybody be able to provide me with a good solution to this problem?

回答1:

Try to go with the provided column/row settings. I double-checked personally that this settings do work. Just make sure that in legend you set the numberColumns or numberRows inside rendererOptions, like:

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

If this doesn't work then I must say some other bug must be hiding in your code, then let us see the code so we can find and squash the bug together :)