Question

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

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

虽然旋转了x轴标签，但某些部分是隐藏的。

enter image description here

秒也应该显示出来。

这是我的选择：

$.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

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

＆＃34;余量＆＃34;是画布边缘和网格之间的像素空间，它可以是具有单独边距的数字或对象每一方，形式如下：
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中，（设置边距），轴标签文本不会被截断。

Answer 2

直接来自您的链接：

调整图表大小以便正确显示所有标签    - 注意：目前这仅适用于标签角度＆gt; 90度。

TODO：
   - 当角度<1时，修复使用长标签调整大小的图形。 90度。它似乎需要一个y2轴，如果没有定义则会失败。

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

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

2 个答案: