具有相等距离x轴的flot条形图

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']
    ];

小提琴这里.