2010-06-11 3 views
0

Android에서 이미 Flot을 사용하고있는 사람이 있습니까?Android에서 Flot + JQuery를 사용하는 데 문제가 있습니다.

나는이 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 : 함수() {

// 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 
     } 

    }; 

}, 

데이터 이름의 divs/checkbox가 렌더링되지만 그래픽이 렌더링되지 않습니다.

Ideias?

+0

동일한 코드가 아닌 Android 시스템에서 작동합니까? – jAndy

+0

예. 그것은 스트럿츠 2 웹 사이트에서 작동합니다. – neteinstein

+0

문제는 사이트에서 언급 한 것입니다 : getGraphTitle()에 대한 알림, 우리는 그냥 문자열을 반환합니다. 이것은 잘 작동합니다. JSON 문자열을 평가 및 해석을 위해 반환하면 일반적으로 작동합니다. WebView에서 JavaScript를 사용하여 eval() 및 모든 종류의 좋은 작업을 수행 할 수 있습니다. 그러나 가장 긴 시간 동안 load() 함수 (onload()가 실행 됨)에서 그래프를 렌더링하기 위해 JSON 문자열을 반환하여 loadGraph()를 실행할 수 없었습니다. 어떤 이유로 렌더링 순서 또는 무언가로 인해 JSON 데이터가 실제로 생성되어 그래프 작성 엔진에 의해 반환되고 해석되지 못했습니다. – neteinstein

답변

1

작동하도록했습니다.

먼저 데이터없이 그래픽을 그립니다.

그런 다음 데이터를 가져 와서 다시 복사하십시오.

일부 수정/수정 작업이 수행되었으므로이 작업을 수행하는 단일 수정을 게시하는 것이 쉽지 않습니다.

관련 문제