Question

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

$(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页面获取数据并最终更新并刷新图表？我有什么想法吗？

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

Answer 1

只是一些一般提示：如果你长时间坚持下去，试着花一些时间，也许几天到一周学习一下AJAX，flot，JSON等等，然后回到你的问题拥有你所拥有的所有新知识。此外，您应该尝试检查自动代码检查器的代码，例如jshint.com。

以下是我使用JSHint检测到的一些可能导致您出现问题的错误。如果您的代码仍无效，请发表评论。

Line 1: $(document).ready(function () {
Unmatched '{'.

Line 136: }
Expected ')' and instead saw ''.

Line 136: }
Missing semicolon.

Answer 2

你的第一个问题在于没有在＆＃34; onDataReceived＆＃34;中做任何事情。用于更新数据的功能。此函数中的代码应如下所示：

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

你的最后一个问题是＆＃34; gd＆＃34;你正在尝试使用的功能。您在代码中要求JSON响应，然后尝试解析JSON数据。只有gd（）不被识别。

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

祝你好运！

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

使用Ajax更新flot图表

2 个答案: