Question

我在使用FLOT正确显示我的折线图时遇到问题。基本上是一个月了。发生的事情是我在SQL数据库中存储从当前月到过去12个月的系统中用户数量的历史记录。我正从后面的代码（asp.net）中检索这些数据并将其放在页面上。所有的数据都在那里，所有的数据都显示在图表上，但9月的点显示了XAXIS，9月的8月显示点，8月的7月显示点等等。

图片：http://www.knowmoreit.com/chartproblem.png

这是我的整个javascript：

<script type="text/javascript">

    var maxDate = new Date();
    var minDate = new Date();

    var data1 = [
        [GetMonth(0), <%= userMonthValues[0] %>],
        [GetMonth(1), <%= userMonthValues[1] %>],
        [GetMonth(2), <%= userMonthValues[2] %>],
        [GetMonth(3), <%= userMonthValues[3] %>],
        [GetMonth(4), <%= userMonthValues[4] %>],
        [GetMonth(5), <%= userMonthValues[5] %>],
        [GetMonth(6), <%= userMonthValues[6] %>],
        [GetMonth(7), <%= userMonthValues[7] %>],
        [GetMonth(8), <%= userMonthValues[8] %>],
        [GetMonth(9), <%= userMonthValues[9] %>],
        [GetMonth(10), <%= userMonthValues[10] %>],
        [GetMonth(11), <%= userMonthValues[11] %>]
    ];

    var dataset = [
        {
            label: "Users",
            data: data1,
            color: "#FF0000",
            points: { fillColor: "#FF0000", show: true },
            lines: { show: true }
        }
    ];

    $(document).ready(function () {
        $.plot($("#placeholder"), dataset, {
            xaxis: {
                min: minDate.setMonth(maxDate.getMonth() - 12),
                max: maxDate,
                mode: "time",
                tickSize: [1, "month"],
                monthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                tickLength: 0,
                axisLabel: "Month",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                axisLabelPadding: 5
            },
            yaxis: {
                axisLabel: 'Total',
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                axisLabelPadding: 5
            },
            series: {
                lines: {
                    show: true,
                    fill: false
                },
                points: {
                    show: false
                }
            },
            grid: {
                hoverable: true,
                mouseActiveRadius: 30,
                borderWidth: 1
            }
        });

        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: '5px',
                'background-color': '#fee',
                'color': '#000000',
                'font-size': '14px',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
        }

        var previousPoint = null;
        $("#placeholder").bind("plothover", function (event, pos, item) {

            if (item) {
                if (previousPoint != item.dataIndex) {
                    previousPoint = item.dataIndex;

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

                    showTooltip(item.pageX, item.pageY,
                                item.series.label + " as of " + $.date(x) + " = " + y);
                }
            }
            else {
                $("#tooltip").remove();
                previousPoint = null;
            }
        });

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

    });

    $.date = function (dateObject) {
        var d = new Date(dateObject);
        var day = d.getDate();
        var month = d.getMonth() + 1;
        var year = d.getFullYear();
        if (day < 10) {
            day = "0" + day;
        }
        if (month < 10) {
            month = "0" + month;
        }
        var date = month + "/" + day + "/" + year;

        return date;
    };

    function GetMonth(subtract) {
        var d = new Date();
        var v = d.setMonth(d.getMonth() - subtract);
        return v;
    }
</script>

Answer 1

也许我错过了一些东西，但它看起来（几乎）对我来说是正确的。通常，一个月的点数将反映月初的数据，而不是该月的整个数据。在你的情况下，你将从当前日期开始一个月，所以它将在8月29日显示它应该是9月1日。您的图表上还有13个点，但只有12个数据点，这就是为什么它似乎从11月开始（我猜它实际上是10月29日），而不是10月1日。

jQuery Flotchart是一个月的假期

1 个答案: