關於在Android中使用Flot + JQuery的問題

Question

有人在Android中使用過Flot嗎？

我一直在閱讀此http://rapidandroid.org/wiki/Graphing，並重新使用了我在網站上運行的代碼。

問題在於該圖形無法渲染。

像這樣：

--------------提取數據的JAVASCRIPT --------------------

    if ($('#newsStatsCheckbox').is(':checked')) {

        $.ajax( {
            url : mobileClippingStatistics.baseUrl
                    + "countNews.json?aggregation="
                    + $("#aggregation").val() + "&start="
                    + $("#start").val() + "&end=" + $("#end").val(),
            type : "GET",
            dataType : "json",
            success : mobileClippingStatistics.addToGraphic,
            error : function(xhr, ajaxOptions, thrownError) {
                console.error("News hits data is not available...");
                console.error(xhr.status);
                console.error(thrownError);
                alert("News hits data is not available...");
            }
        });

    }

-------------其他方法----------

          addToGraphic : function(jsonData) {
    // To keep the colors the same  

    if (typeof jsonData == 'string') {
        var splitData = jsonData.split(" ");

        for ( var i = 0; i < splitData.length - 1; i++) {
            var json = eval('(' + splitData[i] + ')');

            json.color = mobileClippingStatistics.plotDataColor;

            mobileClippingStatistics.plotData.push(json);
            mobileClippingStatistics.plotDataBackup.push(json);

            var div = $("<div style='padding-right:10px; position:relative; float:left;' />");

            var label = $("<label/>");
            label
                    .html(mobileClippingStatistics.plotData[mobileClippingStatistics.plotData.length - 1].label);

            var check = $('');
            check.attr('id', "checkbox"
                    + mobileClippingStatistics.plotDataColor);

            div.append(label);
            div.append('<input id="checkbox'+mobileClippingStatistics.plotDataColor+'" type="checkbox" checked="checked" onchange="mobileClippingStatistics.refreshGraphic()" />');

            $("#plotOptions").append(div);

            mobileClippingStatistics.plotDataColor++;

        }

    }

    else {
        jsonData.color = mobileClippingStatistics.plotDataColor;
        mobileClippingStatistics.plotData.push(jsonData);
        mobileClippingStatistics.plotDataBackup.push(jsonData);

        div = $("<div style='padding-right:10px; position:relative; float:left;' />");

        var label = $("<label/>");
        label
                .html(mobileClippingStatistics.plotData[mobileClippingStatistics.plotData.length - 1].label);

        check = $('<input type="checkbox" checked="checked" onchange="mobileClippingStatistics.refreshGraphic()" style="padding-right:10px; />');
        check.attr('id', "checkbox"
                + mobileClippingStatistics.plotDataColor);

        div.append(label);
        div.append('<input id="checkbox'+mobileClippingStatistics.plotDataColor+'" type="checkbox" checked="checked" onchange="mobileClippingStatistics.refreshGraphic()" />');

        $("#plotOptions").append(div);

        mobileClippingStatistics.plotDataColor++;

    }

    mobileClippingStatistics.plotGraphic();

},

plotGraphic：function（）{

    // Plot graphic
    var plot = $.plot($("#plot"), mobileClippingStatistics.plotData,
            mobileClippingStatistics.options);

    var overview = $.plot($("#plotOverview"),
            mobileClippingStatistics.plotData, {
                series : {
                    lines : {
                        show : true,
                        lineWidth : 1
                    },
                    shadowSize : 0
                },
                xaxis : {
                    ticks : [],
                    mode : "time"
                },
                yaxis : {
                    ticks : [],
                    autoscaleMargin : 0.1
                },
                selection : {
                    mode : "x"
                },
                legend : {
                    show : false
                }

            });

    mobileClippingStatistics.showPlots();

    $("#plot").bind(
            "plotselected",
            function(event, ranges) {
                // do the zooming

                plot = $.plot($("#plot"),
                        mobileClippingStatistics.plotData, $.extend(true,
                                {}, mobileClippingStatistics.options, {
                                    xaxis : {
                                        min : ranges.xaxis.from,
                                        max : ranges.xaxis.to
                                    }
                                }));

                // don't fire event on the overview to prevent eternal loop
                overview.setSelection(ranges, true);
            });

    $("#plotOverview").bind(
            "plotselected",
            function(event, ranges) {
                // plot.setSelection(ranges);
                $("#plot").html("");
                $.plot($("#plot"), mobileClippingStatistics.plotData, $
                        .extend(true, {}, mobileClippingStatistics.options,
                                {
                                    xaxis : {
                                        min : ranges.xaxis.from,
                                        max : ranges.xaxis.to
                                    }
                                }));
            });

},

defineOptions : function() {
    mobileClippingStatistics.options = {
        lines : {
            show : true
        },
        points : {
            show : true
        },
        xaxis : {
            mode : "time"
        },
        yaxis : {
            min : 0
        },

        grid : {
            markings : mobileClippingStatistics.weekendAreas
        }

    };

},

盡管具有數據名稱的div /復選框已呈現，但該圖形未呈現。

愛迪亞？

Answer 1

得到這個工作。

首先繪制沒有數據的圖形。

然后獲取數據並重新繪制。

已經完成了一些其他修復/修改，因此我不容易發布使該修改生效的單個修改。