jquery - x 轴等距的 float 条形图

Question

我在报告中使用 flot。我可以将数据放入 flot 中，但我对其格式感到困惑。

例如，我的flot代码如下所示:

var views = [
   [3747, 7],
   [3119, 2],
   [3442, 2],
   [3748, 1],
   [3754, 1],
   [2645, 1],
   [3534, 1],
   [3120, 1],
   [2836, 1],
   [3571, 1]
];
var ticks = [
    3747,
    3119,
    3442,
    3748,
    3754,
    2645,
    3534,
    3120,
    2836,
    3571
];
var options = {
    series: {
        bars: {
            show: true
        }
    },
    grid: {
        hoverable:true,
        clickable:true,
        tickColor:"#dddddd",
        borderWidth:0
    },
    bars: {
        align: "center",
        barWidth: 0.5
    },
    xaxis: {
        ticks: ticks
    },
    colors:["#FA5833"]
};
var data = [{data: views, label: "Views"}];
var placeholder = $("#top-views-graph");
var plot = $.plot(placeholder, data, options); 

这表明:

我有两个问题。

1. x 轴自动调整每个标签之间的间隙。我希望他们都是平等的。
2. 我需要实际的条形来扩展“网格列”的整个宽度

有人知道如何实现这个目标吗？

我已经尝试过文档和谷歌，但我似乎找不到任何方法。我本以为这是很多人都需要的东西。

如有任何帮助，我们将不胜感激:)

/r3plica

Answer 1

Flot 将您的刻度值视为数字(给我在这个数字上打勾)，而您真正想要的只是让它们成为标签。

指定您的报价和数据，如下所示:

var views = [[0,7],
             [1,2],
             [2,2],
             [3,1],
             [4,1],
             [5,1],
             [6,1],
             [7,1],
             [8,1],
             [9,1]];


    var ticks = [
        [0,'3747'],
        [1,'3119'],
        [2,'3442'],
        [3,'3748'],
        [4,'3754'],
        [5,'2645'],
        [6,'3534'],
        [7,'3120'],
        [8,'2836'],
        [9,'3571']
    ];

fiddle here .