-3

我使用 flot 插件创建了一个体重图表，我这样做了：

$(document).ready(function () {
var data1 = [
    [gd(2012, 0, 1), 67],
    [gd(2012, 1, 1), 68],
    [gd(2012, 2, 1), 75],
    [gd(2012, 3, 1), 69]
];

var data2 = [
    [gd(2012, 0, 1), 60],
    [gd(2012, 1, 1), 60],
    [gd(2012, 2, 1), 60],
    [gd(2012, 3, 1), 60]
];
var dataset = [{
    label: "weight",
    data: data1
}, {
    label: "Goal weight",
    data: data2
}];

var options = {
    series: {
        lines: {
            show: true
        },
        points: {
            radius: 3,
            fill: true,
            show: true
        }
    },
    xaxis: {
        mode: "time",
        tickSize: [5, "day"],
        tickLength: 0,
        axisLabel: "2013",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 10
    },
    yaxes: [{
        axisLabel: "",
        axisLabelUseCanvas: true,
        axisLabelFontSizePixels: 12,
        axisLabelFontFamily: 'Verdana, Arial',
        axisLabelPadding: 3,
        tickFormatter: function (v, axis) {
            return $.formatNumber(v, {
                format: "#,###",
                locale: "us"
            });
        }
    }],
    legend: {
        noColumns: 0,
        labelBoxBorderColor: "#000000",
        position: "nw"
    },
    grid: {
        hoverable: true,
        borderWidth: 2,
        borderColor: "#633200",
        backgroundColor: {
            colors: ["#ffffff", "#EDF5FF"]
        }
    },
    colors: ["#FFA100", "#B7C84B"]
};

$(document).ready(function () {
    $.plot($("#flot-placeholder1"), dataset, options);
    $("#flot-placeholder1").UseTooltip();
});

function gd(year, month, day) {
    return new Date(year, month, day).getTime();
}

var previousPoint = null,
    previousLabel = null;
var monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];


$.fn.UseTooltip = function () {
    $(this).bind("plothover", function (event, pos, item) {
        if (item) {
            if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
                previousPoint = item.dataIndex;
                previousLabel = item.series.label;
                $("#tooltip").remove();

                var x = item.datapoint[0];
                var y = item.datapoint[1];

                var color = item.series.color;
                var month = new Date(x).getDay();

                //console.log(item);

                if (item.seriesIndex == 0) {
                    showTooltip(item.pageX,
                        item.pageY,
                        color,
                        "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(USD)");
                } else {
                    showTooltip(item.pageX,
                        item.pageY,
                        color,
                        "<strong>" + item.series.label + "</strong><br>" + monthNames[month] + " : <strong>" + y + "</strong>(%)");
                }
            }
        } else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};

function showTooltip(x, y, color, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 40,
        left: x - 120,
        border: '2px solid ' + color,
        padding: '3px',
        'font-size': '9px',
        'border-radius': '5px',
        'background-color': '#fff',
        'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        opacity: 0.9
    }).appendTo("body").fadeIn(200);
}

});

我到底需要什么：

1-将数据放在单独的文件中，例如 ajax.json ：

var data1 = [
[gd(2012, 0, 1), 67],
[gd(2012, 1, 1), 68],
[gd(2012, 2, 1), 75],
[gd(2012, 3, 1), 69]
];

var data2 = [
[gd(2012, 0, 1), 60],
[gd(2012, 1, 1), 60],
[gd(2012, 2, 1), 60],
[gd(2012, 3, 1), 60]
];

因为我将从数据库中获取值，但我不知道如何使用函数 gd() ：

function gd(year, month, day) {
    return new Date(year, month, day).getTime();
}

2-第二个问题是我希望刷新图表以更新数据。我试过但每次我得到错误并且图表消失了，我的想法是使用带有点击功能的ajax：

$("button.dataUpdate").click(function () {

....

function onDataReceived() {

    $.plot("#flot-placeholder1", data, options);
}

$.ajax({
    url: "ajax.json",
    type: "GET",
    dataType: "json",
    success: onDataReceived
});

所以我尝试通过单击“dataupdate”按钮运行 ajax，然后从 ajax.json 页面获取数据，最后更新和刷新图表？我知道吗？

备注：请我花了 2 天时间找到一个解决方案，将最后一个代码正确集成到我的第一个代码中以获得所有工作，所以我希望有一个直接的解决方案，其中包含代码，而不仅仅是评论......

4

2 回答 2

0

您的第一个问题在于没有在“onDataReceived”函数中执行任何操作来更新数据。这个函数中的代码应该看起来更像这样：

function onDataReceived(series) {
    data = []; // Delete this line if you want to add graphs, not replace them.
    data.push(series);
    $.plot("#flot-placeholder1", data, options);
}

这应该为您提供一个工作示例，其中您请求的页面上的数据如下所示：

"label": "Label Name",
"data": [[1999, 3.0], [2000, 3.9], [2001, 2.0], [2002, 1.2], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]

您的最后一个问题是您尝试使用的“gd”功能。您在代码中请求 JSON 响应，然后尝试解析 JSON 数据。只有 gd() 不被识别。

有关更多信息，请参阅他们的 ajax 示例，并查看源代码：http ://www.flotcharts.org/flot/examples/ajax/

祝你好运！

编辑：而不是使用 gd() 函数，只需使用 unix 时间戳（乘以 1000 用于 javascript 目的）。它就像一个魅力。

于 2013-08-27T11:21:48.207 回答
0

只是一些一般性的提示：如果你在某件事上卡了很长时间，试着花一些时间，也许几天到一周来学习 AJAX、flot、JSON 等，然后再回到你的问题上来你拥有的新知识。此外，您应该尝试根据自动代码检查器（例如jshint.com ）检查您的代码。

以下是我使用 JSHint 检测到的一些错误，这些错误可能会导致您的问题。如果您的代码仍然不起作用，请发表评论。

第 1 行： $(document).ready(function () {
不匹配的'{'。

第 136 行：}
预期为 ')' 而看到的是 ''。

第 136 行：}
缺少分号。
于 2013-08-19T06:11:49.260 回答