jquery - 多系列条形图显示为堆栈条，而不是并排显示系列

Question

我在我的项目中使用多系列条形图，除了图形的显示样式之外，一切看起来都很好，而不是并排显示每个系列，而是像堆叠条形图的行为一样显示。我使用了此方法..

<script type="text/javascript">
 $(document).ready(function () {

 var ms_data = [{"label":"FOO","data":[[0,80],[1,70],[2,100],[3,60],[4,102]]},
             {"label":"BAR","data":[[0,10],[1,20],[2,30],[3,40],[4,80]]},
             {"label":"CAR","data":[[0,5],[1,10],[2,15],[3,20],[4,25]]}]
var ms_ticks = [[0,"sample5"],[1,"sample4"],[2,"sample3"],[3,"sample2"],[4,"sample1"]];

function plotWithOptions() {
  $.plot($("#placeholder"), ms_data, {
    bars: { show: true, barWidth: 0.6, series_spread: true, align: "center" },
    xaxis: { ticks: ms_ticks, autoscaleMargin: .10 },
    grid: { hoverable: true, clickable: true }
  });
}

function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css( {
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 5,
        border: '1px solid #fdd',
        padding: '2px',
        'background-color': '#fee',
        opacity: 0.80
    }).appendTo("body").show();
}

plotWithOptions();

$("#placeholder").bind("plothover", function (event, pos, item) {
  $("#x").text(pos.x.toFixed(2));
  $("#y").text(pos.y.toFixed(2));
    if (item) {
        if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);

            showTooltip(item.pageX, item.pageY,
                        item.series.label + " Group id: " + Math.floor(x) + ", y = " +    y + ", seriesIndex: " + item.seriesIndex);
        }
    }
    else {
        $("#tooltip").remove();
        previousPoint = null;            
    }
});

$("#placeholder").bind("plotclick", function (event, pos, item) {
    if (item) {
        $("#clickdata").text("You clicked bar " + item.dataIndex + " in " +  item.series.label + ".");
    }
  });

  });
  </script>

Answer 1

您使用的示例来自非常旧的 flot 版本(2009 年的 0.5 版)。当前版本 (0.8.x) 不支持 series_spread 选项。

您可以使用SideBySideImproved插件以使用当前 flot 版本获取该函数。

我构建了一个 fiddle根据您的示例并更改以下内容以获得您想要的功能。

对于每个数据系列:

bars: {
    order: 1   // 1, 2, 3 for the three data series
},

在选项下:

bars: {
    show: true,
    barWidth: 0.2,   // the sum must be less than 1.0
    // series_spread: true,
    align: "center"
},