javascript - 对齐数组中超过 2 个条形的条形

Question

我正在尝试使用 flot 创建一个在每个 x 轴空间中有多个条形图，我几乎可以正常工作，但是，我希望所有条形图彼此相邻出现，但唯一的选择是对齐:“左”，对齐:“右”或对齐:“中心”。这意味着它们重叠的条形超过三个，是否有办法以这种方式绘制该图？

Answer 1

如果您希望系列中的每个条形图彼此相邻显示，则必须使用 flot 的 orderBars plugin .

您可以通过包含插件并向每个系列 bars 属性添加 order 属性来指定每个系列的顺序:

var series = [];

series.push({
    data: [],  // your raw data
    bars: {
        order: 0
    }
});

series.push({
    data: [], // your raw data
    bars: {
        order: 1
    }
});

您还需要根据您拥有的系列数量选择适当的 barWidth 值。在下面的代码片段中，我为三个系列选择了 barWidth 为 .25:

$(function () {
    var data1 = [
        [0, 12.3],
        [1, 295],
        [2, 143],
        [3, 79],
        [4, 125],
        [5, 8],
        [6, 125] 
        ];
    var data2 = [
        [0, 15],
        [1, 28.95],
        [2, 163],
        [3, 74],
        [4, 125],
        [5, 85],
        [6, 125] 
        ];
    var data3 = [
        [0, 158],
        [1, 28.95],
        [2, 103],
        [3, 74],
        [4, 145],
        [5, 85],
        [6, 105] 
        ];

var dataSet = [{
        data: data1,
        bars: { order: 1 }
    },{
        data: data2,
        bars: { order: 2 }
    },{
        data: data3,
        bars: { order: 3 }
    }];

    $.plot("#chart", dataSet, {
        series: {
            bars: {
                show: true,
                barWidth: .25
            }
        }
    });
});

#chart {
    width: 400px;
    height: 250px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://rawgit.com/emmerich/flot-orderBars/master/js/jquery.flot.orderBars.js"></script>
<div id="chart"></div>