javascript - Flot 条形图 将条与 X 轴标签对齐

Question

您好我正在尝试绘制一个包含 31 天数据的条形图。但是，当我绘制它时，当我将条形设置为

align: "center"

，第一个条和最后一个条被切成两半。

这是jsfiddle：http: //jsfiddle.net/3T6qc/

如何设置它以便我看到完整的条形并将标签直接放在中心下方？请注意，我使用 flot 作为绘图库。

Answer 1

嘿 这里有一些关于你的小提琴的注意事项。

1. 您忘记在示例中使用轴标签插件。Flot 没有内置支持轴标签。您需要使用第三方插件。参考Flot 插件获取轴标签

2. 有关您的条在边缘被切割的问题，您可以参考带有对齐中心的条形图 以下更新的代码对我有用

}

if (graphMode == "month") {
$( "#hSlider" ).slider( "option", "min", 1.75 ); //add 0.75 offset
$( "#hSlider" ).slider( "option", "max", 31.75 );
$( "#hSlider" ).slider( "option", "values", [ 1, 31 ] );
for (var i = 1; i <= 31; i++) {
    if (i < day)
    {
        d.push([ i, getRandomInt(1200, 1800) ]);
    }
    else
    {
        d.push([ i, 0]);
    }
}
}

所以你需要稍微更新你的代码来为你的条形宽度添加偏移量。

Answer 2

这是一个已知的问题; 您需要通过调整轴最小值和最大值来解决它。例如，如果您在 0、1、2 处有刻度，您需要将最小值设置为 -0.5，将最大值设置为 2.5，以考虑条形宽度和居中。鉴于您已经有滑块来指定这些值，这应该很容易。