在浮动图中显示并排条需要帮助答案

【问题标题】：Need help for showing side by side bars in flot graph在浮动图中显示并排条需要帮助
【发布时间】：2015-07-01 05:03:41
【问题描述】：

需要的输出...

我的代码到现在

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/js/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="jquery.flot.time.js"></script>    
<script type="text/javascript" src="jshashtable-2.1.js"></script>    
<script type="text/javascript" src="jquery.numberformatter-1.2.3.min.js"></script>
<script type="text/javascript" src="jquery.flot.symbol.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="jquery.flot.orderBars.js"></script>
<script>

var data1 = [[1,0],[2,0],[3,3.5],[4,4.5],[5,6.2]];
var data2 = [[1,3.3],[2,2.3],[3,3],[4,2.5],[5,3.9]];
var data3 = [[1,3.3],[2,2.3],[3,6.5],[4,7],[5,10.1]];


var dataset = [
    {
        label: "ME(L)",
        data: data1,        
        color: "orange",
        bars: {
            show: true,
            align: "center",
            lineWidth:1
        }
    }, 
    {
        label: "AE(L)",
        data: data2,
        color: "green",
        bars: {
            show: true,
            align: "center",
            lineWidth:1
        }
    },
    {
        label: "Total(L)",
        data: data3,
        color: "blue",
        points: { symbol: "triangle", fillColor: "#0062FF", show: true },
        lines: {show:true}
    }
];

var options = {

xaxis: {
    tickLength: 0,
    axisLabel: "HOURS",
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 10,
    color: "black"
},

yaxis: {
    axisLabel: "FUEL CONSUMPTION"
}

};

$(document).ready(function () {
    $.plot($("#placeholder"), dataset, options);
});

</script>
</head>
<body>
    <div style="width:450px;height:300px;text-align:center;margin:10px">       
        <div id="placeholder" style="width:100%;height:100%;"></div>       
    </div>
</body>
</html>

我得到的输出是

需要输出

请大家帮忙谢谢

【问题讨论】：

标签： javascript html bar-chart flot

【解决方案1】：

使用Side-by-side-improved 插件和此选项可为您提供与图像相似的结果。

var dataset = [{
    bars: {
        show: true,
        align: "left",
        barWidth: 0.3,
        lineWidth: 1,
        order: 1
    }
}, {
    bars: {
        show: true,
        align: "left",
        barWidth: 0.3,
        lineWidth: 1,
        order: 2
    }
}, ...];

有关完整示例，请参阅此fiddle。

【讨论】：

非常感谢你的朋友