如何使用 flot 的类别插件在类别中绘制并排（多个系列）条形图？答案

【问题标题】：How can I graph side-by-side (multiple series) bar graphs within a category using flot's categories plugin?如何使用 flot 的类别插件在类别中绘制并排（多个系列）条形图？
【发布时间】：2013-11-12 13:47:32
【问题描述】：

我正在使用 flot.js 和 flot 的类别插件来创建使用类别而不是 x 轴刻度的数值的条形图。

当我只使用一个系列时，它的效果非常好：http://jsfiddle.net/tFy46/1/。

但是，当我使用多个系列时，结果会堆叠在一起，而不是并排排列。

我的代码：

var graphCanvas = $('#graph-canvas'),
    graphData = [
        {
            "color": "#f00",
            "data": [
                ["1st Nov to 3rd Nov", 5.304752, 4.04044192]
            ]
        },
        {
            "color": "#0f0",
            "data": [
                ["1st Nov to 3rd Nov", 8.80990656, 3.86548928],
                ["11th Nov to 15th Nov", 37.89327872, -2.1734158399999997]
            ]
        }
    ],
    graphOptions = {
        legend: {
            show: false
        },
        series: {
            bars: {
                align: 'center',
                fill: 0.7,
                show: true
            }
        },
        xaxis: {
            mode: 'categories'
        }
    };
$.plot(graphCanvas, graphData, graphOptions);

http://jsfiddle.net/tFy46/

（之前在 how to draw multiple bar charts grouped by category with flot js 上已经提出过这个问题，但“使用 flot 'categories' 插件”的公认答案不是一个有用的答案。）

【问题讨论】：

标签： jquery flot

【解决方案1】：

不要“使用 flot 'categories' 插件”是一个有用的答案吗？ :)

我会放弃它并自己标记数据（这就是插件在后台所做的所有事情）：

graphData = [
    {
        "color": "#f00",
        "data": [
            [0, 5.304752, 4.04044192]
        ]
    },
    {
        "color": "#0f0",
        "data": [
            [0.5, 8.80990656, 3.86548928],
            [1.5, 37.89327872, -2.1734158399999997]
        ]
    }
],
graphOptions = {
    legend: {
        show: false
    },
    series: {
        bars: {
            align: 'center',
            fill: 0.7,
            show: true,
            barWidth: 0.45
        }
    },
    xaxis: {
        ticks: [[0.25,"1st Nov to 3rd Nov"],[1.5,"11th Nov to 15th Nov"]]
    }
};

更新fiddle。

【讨论】：