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

Question

需要输出...

到目前为止我的代码

<!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>

我得到的输出是

需要输出

请有人帮忙谢谢

Answer 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。

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

Need help for showing side by side bars in flot graph

html

javascript

flot

bar-chart