Question

我正在尝试使用Flot for JQUery绘制以下图表：

enter image description here

A，B，C和D的营销工作......

我有这个示例代码：

var data = [ ["January", 10,80], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ];

    $.plot("#catchart", [ data ], {
        series: {
            bars: {
                show: true,
                barWidth: 0.6,
                align: "center"
            }
        },
        xaxis: {
            mode: "categories",
            tickLength: 0
        }
    });

但是这只会在每个类别中绘制一列。如何在每个类别中将两列“配对”或一起使用？

Answer 1

这可以使用categories插件以及orderBars plugin。

var data = [
    { label: "Money Spent", data: [ ["January", 10], ["February", 8], ["March", 4], ["April", 13], ["May", 17], ["June", 9] ] },
    { label: "Money Earned", data: [ ["January", 20], ["February", 30], ["March", 5], ["April", 6], ["May", 9], ["June", 9] ] }
];

$.plot("#catchart", data, {
    series: {
        bars: {
            show: true,
            barWidth: 0.2,
            lineWidth: 0,
            order: 1,
            fillColor: {
                colors: [{
                    opacity: 1
                }, {
                    opacity: 1
                }]
            }
        }
    },
    xaxis: {
        mode: "categories"
    },
    grid: {
        borderWidth: 0
    },
    colors: ["#3F48CC", "#ED1C24"]
});

这是jFiddle。

Answer 2

我重新发布我删除的答案，因为它正在帮助人们。我添加了解决代码。

在这里找到答案：http://www.pikemere.co.uk/blog/tutorial-flot-how-to-create-bar-charts/谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Flot Bar Chart</title>

<style type="text/css">
body { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
h1 { width: 450px; margin: 0 auto; font-size: 12px; text-align: center; }
#placeholder { width: 450px; height: 200px; position: relative; margin: 0 auto; }
.legend table, .legend > div { height: 82px !important; opacity: 1 !important; right: -55px; top: 10px; width: 116px !important; }
.legend table { border: 1px solid #555; padding: 5px; }
#flot-tooltip { font-size: 12px; font-family: Verdana, Arial, sans-serif;    position: absolute; display: none; border: 2px solid; padding: 2px; background-  color: #FFF; opacity: 0.8; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
</style>

<!--[if lte IE 8]><script type="text/javascript" language="javascript"   src="excanvas.min.js"></script><![endif]-->
 <script type="text/javascript" language="javascript" src="jquery-1.7.2.min.js"> </script>
<script type="text/javascript" language="javascript" src="jquery.flot.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" language="javascript" src="jquery.flot.orderBars.js"></script>

<script type="text/javascript">
$(document).ready(function () {
var d1_1 = [
    [1325376000000, 120],
    [1328054400000, 70],
    [1330560000000, 100],
    [1333238400000, 60],
    [1335830400000, 35]
];

var d1_2 = [
    [1325376000000, 80],
    [1328054400000, 60],
    [1330560000000, 30],
    [1333238400000, 35],
    [1335830400000, 30]
];

var d1_3 = [
    [1325376000000, 80],
    [1328054400000, 40],
    [1330560000000, 30],
    [1333238400000, 20],
    [1335830400000, 10]
];

var d1_4 = [
    [1325376000000, 15],
    [1328054400000, 10],
    [1330560000000, 15],
    [1333238400000, 20],
    [1335830400000, 15]
];

var data1 = [
    {
        label: "Product 1",
        data: d1_1,
        bars: {
            show: true,
            barWidth: 12*24*60*60*300,
            fill: true,
            lineWidth: 1,
            order: 1,
            fillColor:  "#AA4643"
        },
        color: "#AA4643"
    },
    {
        label: "Product 2",
        data: d1_2,
        bars: {
            show: true,
            barWidth: 12*24*60*60*300,
            fill: true,
            lineWidth: 1,
            order: 2,
            fillColor:  "#89A54E"
        },
        color: "#89A54E"
    },
    {
        label: "Product 3",
        data: d1_3,
        bars: {
            show: true,
            barWidth: 12*24*60*60*300,
            fill: true,
            lineWidth: 1,
            order: 3,
            fillColor:  "#4572A7"
        },
        color: "#4572A7"
    },
    {
        label: "Product 4",
        data: d1_4,
        bars: {
                show: true,
            barWidth: 12*24*60*60*300,
            fill: true,
            lineWidth: 1,
            order: 4,
            fillColor:  "#80699B"
        },
        color: "#80699B"
    }
];

$.plot($("#placeholder"), data1, {
    xaxis: {
        min: (new Date(2011, 11, 15)).getTime(),
        max: (new Date(2012, 04, 18)).getTime(),
        mode: "time",
        timeformat: "%b",
        tickSize: [1, "month"],
        monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
        tickLength: 0, // hide gridlines
        axisLabel: 'Month',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5
    },
    yaxis: {
        axisLabel: 'Value',
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        axisLabelPadding: 5
    },
    grid: {
        hoverable: true,
        clickable: false,
        borderWidth: 1
    },
    legend: {
        labelBoxBorderColor: "none",
        position: "right"
    },
    series: {
        shadowSize: 1
    }
});

function showTooltip(x, y, contents, z) {
    $('<div id="flot-tooltip">' + contents + '</div>').css({
        top: y - 20,
        left: x - 90,
        'border-color': z,
    }).appendTo("body").show();
}

function getMonthName(newTimestamp) {
    var d = new Date(newTimestamp);

    var numericMonth = d.getMonth();
    var monthArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

    var alphaMonth = monthArray[numericMonth];

    return alphaMonth;
}

$("#placeholder").bind("plothover", function (event, pos, item) {
    if (item) {
        if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;
            $("#flot-tooltip").remove();

            var originalPoint;

            if (item.datapoint[0] == item.series.data[0][3]) {
                originalPoint = item.series.data[0][0];
            } else if (item.datapoint[0] == item.series.data[1][3]){
                originalPoint = item.series.data[1][0];
            } else if (item.datapoint[0] == item.series.data[2][3]){
                originalPoint = item.series.data[2][0];
            } else if (item.datapoint[0] == item.series.data[3][3]){
                originalPoint = item.series.data[3][0];
            } else if (item.datapoint[0] == item.series.data[4][3]){
                originalPoint = item.series.data[4][0];
            }

            var x = getMonthName(originalPoint);
            y = item.datapoint[1];
            z = item.series.color;

            showTooltip(item.pageX, item.pageY,
                "<b>" + item.series.label + "</b><br /> " + x + " = " + y + "&deg;C",
                z);
        }
    } else {
        $("#flot-tooltip").remove();
        previousPoint = null;
    }
});
});
</script>
</head>

<body>
    <h1>Average Maximum Temperatures</h1>
    <div id="placeholder"></div>
</body>
</html>

绘制条形图的图

2 个答案: