条形图条形图与X轴标签对齐 [英] Flot Bar Graph Align Bars with X-Axis Labels

问题描述

您好我正在尝试绘制一个包含31天数据的条形图。然而，当我绘制它时，每个数据的标签不直接位于其条形下方的中心，当我将条形设置为

Hello I am trying to plot a bar chart with 31 days data. However when I plot it, the label for each data is not directly in the center below its bar, when i set the bars to

align: "center"

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

, the first bar and last bar gets cut into half.

以下是jsfiddle：
http://jsfiddle.net / 3T6qc /

Here is the jsfiddle: http://jsfiddle.net/3T6qc/

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

How do I set it so that i see the full bars and have the labels directly below in the center? Take note that I am using flot as the plotting library.

推荐答案

嘿这里有一些值得注意的地方你的小提琴。

Hey Here are some points to be noted about your fiddle.

1. 你忘记在你的例子中使用轴标签插件。图中没有内置支持轴标签。你需要使用第三方插件。
   请参阅轴标签的Flot插件

关于您的酒吧边缘被切割的问题，您可以参考条形图对齐中心
以下更新代码为我工作

For issue about your bars getting cut at edges you can refer Bar chart with align center Following updated code worked for me

}

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

所以你需要更新你的稍微编码以增加条宽的偏移量。

So you need to update your code a little to add offset to your bar width.

这篇关于条形图条形图与X轴标签对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！