jqPlot - легенда круга слишком высокая, когда есть много элементов легенды

Я использую jqPlot для создания круговой диаграммы с легендой. Часть параметров круговой диаграммы jqPlot выглядит следующим образом:

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

Недавно я столкнулся со случаем, когда было много элементов легенды (например, 21), из-за чего поле легенды было слишком высоким. Мне интересно, есть ли способ

  1. иметь вертикальную полосу прокрутки в поле легенды
  2. отображать элементы легенды в нескольких столбцах (предпочтительно)

Я попытался установить следующие свойства:

  • количество строк
  • числоКолонки

который я нашел на этой странице:

Параметры $.jqplot.PieRenderer< /а>

однако они, похоже, не вносят никаких изменений.

Может ли кто-нибудь дать мне хорошее решение этой проблемы?


jqplot
person jpen    schedule 03.05.2012    source источник

Ответы (1)


arrow_upward
13
arrow_downward

Попробуйте использовать предоставленные настройки столбца/строки. Я лично перепроверил, что эти настройки работают. Просто убедитесь, что в легенде вы установили numberColumns или numberRows внутри rendererOptions, например:

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

Если это не сработает, то я должен сказать, что в вашем коде должна скрываться какая-то другая ошибка, тогда давайте посмотрим код, чтобы мы могли найти и устранить ошибку вместе :)

person Boro    schedule 04.05.2012
comment
Это сработало! Глупый я, я добавлял numberColumns вне rendererOptions. Спасибо за вашу помощь! Очень признателен. - person jpen; 04.05.2012
comment
Не беспокойся. Однажды я сделал ту же ошибку. Теперь я всегда дважды проверяю документ и примеры, чтобы быть уверенным. В этом конкретном случае из самого документа вы думаете, что он должен идти только под легендой :) - person Boro; 04.05.2012
comment
Просто для тестирования! Если вам нужно ограничить количество строк, свойство numberRows: legend: {show: true, location: 'ne', rendererOptions: {numberRrows: 20}} - person ChoCho; 13.07.2018