0

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

图片：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>
4

1 回答 1

2

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

于 2013-09-29T16:20:16.583 回答