jquery - 带有旋转插件的jQuery Flo隐藏X轴标签

我正在尝试使用jquery Flot创建具有旋转的x轴标签的折线图，但我做不到。

我使用这个插件https://github.com/markrcote/flot-tickrotor

尽管旋转了x轴标签，但某些部分被隐藏了。



秒也应该显示。

这是我的选择：

$.plot("#live-data",
        [{
            data: series,
        }],
        {
            series: {
                lines: {
                    show: true,
                    barWidth: 0.5,
                    align: "center"
                },
                points:{
                    show:true
                }
            },
            xaxis: {
                ticks: x_ticks,
                rotateTicks: 45,
                labelWidth: 150,
                labelHeight: 150,
                reserveSpace: true
            },
            yaxis: {
                ticks: 10,
                min: 0,
                max: y_max,
                tickDecimals: 2
            },
            grid: {
                hoverable: true,
                clickable: false
            }
        });
}

更新：我添加了我的HTML代码。

<div class="row">
    <div class="col-md-12">
        <div class="block" style="height:550px">
            <div class="block-content" id="block-chart" style="height: 500px;">
                <h1>header</h1>
                <h3>sub-header</h3>
                <div id="live-data" style="width: 99%; height: 440px">
                </div>
            </div>
        </div>
    </div>
</div>

我究竟做错了什么？

最佳答案

您可以使用margin选项在图表的两边填充以固定截止轴标签：


“边距”是画布边缘和网格之间的像素间隔，
可以是数字，也可以是具有单个边距的对象
每一面，形式为：

margin: {
    top: top margin in pixels
    left: left margin in pixels
    bottom: bottom margin in pixels
    right: right margin in pixels
}

要解决此问题，我将下边距设置为10：

grid: {
    hoverable: true,
    clickable: false,
    margin: {
        top: 0,
        left: 0,
        bottom: 10,
        right: 0
    }
}

在this fiddle（未设置边距）中，您可以看到轴标签中的第二个值在底边缘处被略微切除。在this fiddle（设置页边距）中，轴标签文本未截断。

关于jquery - 带有旋转插件的jQuery Flo隐藏X轴标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30479480/