Question

我正在尝试使用flot来创建一个在每个x轴空间中都有多个条形的图形，但是我几乎可以使用它，我希望所有的条形图彼此相邻，但是唯一的选项是align：'left'，align：'right'或align：'center'。这意味着它们重叠超过三个条形图，无论如何以这种方式绘制这个图形？

Answer 1

如果您希望系列中的每个小条看起来彼此相邻，则必须使用flot orderBars plugin。

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

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>

将酒吧对齐超过2个酒吧

1 个答案: