时间戳

首页 > 解决方案 > 如果图表只有一个，它会占据整个空闲空间

jquery - 如果图表只有一个，它会占据整个空闲空间

问题描述

我需要以水平图表的形式绘制一个图表，以百分比显示一些值。我做了一个图表，但有一个问题。

当在图表上的一些图表上时，它们看起来很正常。 在此处输入图像描述

但是当图表只有一个时，它占据了所有的空闲空间。 在此处输入图像描述

如何使图表看起来更小，为标签留出位置？

而且我认为如果该值为 20%，如第二个屏幕截图所示，那么 x 轴长度应该超过 20%。

我的代码如下

$.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
            }
        }
    });

}

标签： jquerychartsjqplot

解决方案

axes: {
                xaxis: {
                    min: 0,
                    max: 110,
                    numberTicks: 12
                }

上面的代码解决了我的 x 轴问题。

下面的代码使图表在 y 轴上变小了一点

    rendererOptions: {
        barDirection: 'horizontal',
        barMargin: 50
    }

但 barMargin: 50 不应该总是如此，如果只显示一个图表。

推荐阅读