Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   jqplot, когда диаграмма одна она заполняет всё свободное место на графике (https://javascript.ru/forum/jquery/75353-jqplot-kogda-diagramma-odna-ona-zapolnyaet-vsjo-svobodnoe-mesto-na-grafike.html)

WalterScott 27.09.2018 17:51

jqplot, когда диаграмма одна она заполняет всё свободное место на графике
 
Делаю с помощью плагина jqplot горизонтальную гистограмму. Гистограмма отображает определённую величину в процентах.

Когда диаграмм несколько, они выглядят нормально.



Но когда диаграмма только одна, она растягивается на всю высоту и ширину графика, не оставляя места даже для лейбла.



Как можно скорректировать её размер?

Также не логично выглядит то, что когда значение измеряемой величины 20%, то ось x заканчивается на отметке 20. Было бы лучше, если бы по оси x всегда было минимум 100. То есть масштаб оставался примерно как на первом скриншоте.

Код такой:

$.jqplot.config.enablePlugins = true;
window.charts = {};

if ($('#summaryChart').length > 0) {
    var minimal_data_charts = [];
    for (var i = 0; i < minimal_data.length && i < 10; i++) {
        minimal_data_charts[i] = [minimal_data[i].persent, i+1, minimal_data[i].passenger];
    }

    $('#summaryChart').css('font-size', '15px');
    window.charts.summaryChart = $.jqplot('summaryChart', [
        minimal_data_charts], {
        seriesDefaults: {
            renderer:$.jqplot.BarRenderer,
            pointLabels: { show: true, location: 'e', edgeTolerance: -15 },
            shadowAngle: 135,
            rendererOptions: {
                barDirection: 'horizontal'
            }
        },
        axes: {
            yaxis: {
                renderer: $.jqplot.CategoryAxisRenderer
            }
        }
    });

}

WalterScott 27.09.2018 19:26

Вот так получилось ужать по оси x:
axes: {
                xaxis: {
                    min: 0,
                    max: 110,
                    numberTicks: 12
                }


По оси y можно сжимать, добавляя маргин:
rendererOptions: {
        barDirection: 'horizontal',
        barMargin: 50
    }


только это надо будет делать динамически, когда нужно.


Часовой пояс GMT +3, время: 13:06.