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

Question

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

时，每个数据的标签并不直接位于其条形图下方的中心

align: "center"

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

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

如何设置才能看到完整的条形图并让标签直接位于正下方的中心？ 请注意，我使用 flot 作为绘图库。

Answer 1

嘿，这里有一些关于 fiddle 的注意事项。

1. 您忘记在示例中使用轴标签插件。Flot 没有内置支持轴标签。您需要使用第三方插件。 请参阅Flot plugin for axis label

2. 有关钢筋边缘被切割的问题，您可以引用 Bar chart with align center 以下更新的代码对我有用

}

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]);
    }
}
}

因此，您需要稍微更新一下代码以向条形宽度添加偏移量。