jQuery 带有旋转插件的 flot 隐藏了 x 轴标签

Question

我正在尝试使用 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>

我做错了什么？

Answer 1

直接来自您的link：

The graph is resized so that all labels can be displayed properly.
- NOTE: currently this only works with label angle > 90 degrees.

TODO:
- Fix plot resizing with long labels when angle < 90 degrees. It seems to require a y2axis at the moment and fails if one isn't defined.

所以您可以尝试 135 度而不是 45 度 rotateTicks 或添加第二个 y 轴。

Answer 2

您可以使用 margin 选项填充图表的两侧以修复截止轴标签：

"margin" is the space in pixels between the canvas edge and the grid, which can be either a number or an object with individual margins for each side, in the form:
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 (no margin set), you can see that the second values in the axis labels are slightly cut-off on the bottom edge. In this fiddle中，（设置边距），轴标签文本未被截断。

jQuery 带有旋转插件的 flot 隐藏了 x 轴标签

jQuery flot with rotation plugin hides x axis labels

jquery

flot