Flot 条形图将条形与 X 轴标签对齐答案

【问题标题】：Flot Bar Graph Align Bars with X-Axis LabelsFlot 条形图将条形与 X 轴标签对齐
【发布时间】：2013-08-17 23:34:08
【问题描述】：

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

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

align: "center"

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

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

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

【问题讨论】：

标签： javascript jquery flot

【解决方案1】：

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

您忘记在示例中使用轴标签插件。Flot 没有内置支持轴标签。您需要使用第三方插件。参考Flot plugin for axis label
关于钢筋在边缘被切割的问题，您可以参考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]);
    }
}
}

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

【讨论】：

【解决方案2】：

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

【讨论】：