如何在刻度线之间居中使用flot graph x-axis tick标签

时间:2013-11-14 01:10:25

标签: jquery flot

我有一个使用flot.js创建的多系列条形图:http://jsfiddle.net/tFy46/6/

正如你从小提琴中看到的那样,不清楚每个蜱所指的是哪一组。

即使我更改每个数据点以使每组条形图以刻度线(http://jsfiddle.net/tFy46/7/)为中心,它也不是很清楚(特别是当系列数量增加时。

我希望能够将每个刻度线之间的刻度标签居中。这可能吗? (我已尝试labelWidth无效;我是否需要摆弄tickFormatter功能?)

1 个答案:

答案 0 :(得分:3)

对不起,我误解了你的意思。

不幸的是,Flot在标记位置绘制标签,因此将标签与标记偏移将会出现问题。

更好的解决方案是禁用刻度线,然后使用网格的markings选项划分列组:

    xaxis: {
        ticks: [[0.5,"1st Nov to 3rd Nov"],[2.0,"11th Nov to 15th Nov"]],
        tickLength: 0, // disable tick
        min: -0.2,
        max: 2.7
    },
    yaxis: {
        tickLength: 0 // disable tick
    },
    grid: {
        markings: [ { xaxis: { from: 1.25, to: 1.25 }, color: "black" } ] // create demarcation line
    }

小提琴here

enter image description here