flot - 如何控制 Flot 图的外边距

Question

我在弄清楚如何控制 Flot 上的外边距时遇到了一些困难。图我已经实现。我尝试了很多选择； minBorderMargin，边距，axisMargin，labelMargin。无论是单独设置还是全部设置，都没有改变任何事情。

我想要实现的是完全控制右边距的宽度。

如您所见 in this example , 右侧有一个边距，即使 minBorderMargin 设置为 0(零)。

这是源代码:

var $wrapper = $('<div />').addClass('wrapper'),
    $graph = $('.graph'),
    data = {
        color: '#dba400', 
        hoverable: true,
        data: [
            // [1, 215000],
            // [2, 205000],
            // [3, 0],
            // [4, 70000],
            [35, 270000],
            [36, 105000],
            [37, 60000],
            [38, 0],
            [39, 110000]
        ]
    },
    options = {
        xaxis: {
            color: '#f0f0f0',
            min: 34.5,
            max: 39.5,
            tickColor: 'transparent',
            tickFormatter: function(val) {
                return 'RND' + val;
            }
        },
        yaxis: {
            color: '#f0f0f0',
            tickColor: null,
            tickFormatter: function(val) {
                var units = ['', 'K', 'M'],
                    unit = units.shift();

                while (val > 1000 && units.length > 0) {
                    val /= 1000;
                    unit = units.shift();
                }

                return val + unit;
            }
        },
        grid: {
            borderWidth: 0,
            minBorderMargin: 0
        },
        hooks: {
            processOffset: function(plot, offset) {
                console.log(plot, offset);
            }
        },
        series: {
            points: {
                radius: 0,
                lineWidth: 0
            }
        }
    };

$graph.append($wrapper);
$.plot($wrapper, [data], options);​

额外的问题:有没有一种简单的方法可以左对齐第一个刻度标签并右对齐最后一个刻度标签？

Answer 1

如果您找不到更改绘图的方法，您可以考虑将占位符 div 放在另一个将溢出设置为隐藏的 div 中。然后，您可以通过控制外部 div 的大小或内部 div 的位置来“切断”任何一侧的额外边距。