jquery - FLot 订购的条形太小且彼此距离太长

Question

我有一个带有 orderBars 插件的 Flot 图表。

我有来自 2 个不同年份的 JSON 数据，当我将它们渲染在一起时，它们变得太小了。当我每年单独渲染时，看起来还不错。

我尝试覆盖选项中的条形宽度，但没有成功。

如何解决这个问题？ Example

Answer 1

orderBars 插件尝试执行的操作是计算适当的抖动值以相互偏移条形。考虑到较大的 javascript 毫秒纪元值，它看起来会惨败(它没有考虑大范围的数据，并且似乎尝试将它们抖动 1 秒)。因此，正如我对 flot 的建议一样，跳过插件并自己抖动条形。

一年有 3.15569e10 毫秒；除以条数，是良好 +- 抖动值的基础:

var millisInYear = 3.15569e10;
var N = raw2013.length;
var jitter = millisInYear / N;
for (var i = 0; i < N; i++){
    // find the midpoint and jitter around it
    // this way the "middle" bar is over the year tick
    if (i < N/2){
        raw2013[i].data[0][0] = raw2013[i].data[0][0] - (jitter * (N/2 - i));
    }else{
        raw2013[i].data[0][0] = raw2013[i].data[0][0] + (jitter * (i - N/2));
    }
}

这是更新的 fiddle (请原谅我删除了 JSON 解析，但是用我正在喝的威士忌更容易思考:)