Android混合應用中未顯示D3圖形

Question

我在Android Hybrid應用中使用D3圖。 當此應用程序在瀏覽器中運行時，它顯示出理想的結果，但是當我為android mobile設置並在Emulator上進行測試時，它未顯示graphe，而在LogCat中則顯示了此錯誤，但是當此應用程序在chrome，firefox中運行時不會出現此錯誤

file:///android_asset/www/sm_libraries/sm_custome/graphClass.js: Line 21 : ReferenceError: Can't find variable: Gauge

以下是代碼示例

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>SHA</title>
    <link rel="stylesheet" href="sm_styles/sm_jquery/jquery.mobile.css"/>
    <script src="sm_libraries/sm_jquery/jquery.js"></script>
    <script src="sm_libraries/sm_jquery/jquery.mobile.js"></script>
    <script src="sm_libraries/sm_angular/angular.js"></script>
    <script src="sm_libraries/sm_angular/jquery-mobile-angular-adapter.js"></script>
    <script src="sm_libraries/sm_angular/sm_controllers/sm_report_controller.js"></script>
    <link href="sm_styles/sm_custome/style.css" rel="stylesheet" type="text/css" />
    <script src="includes/footer.js"></script>
</head>
<body  ng-app="myApp">
    <div data-role="page" id="cb_firstReport" ng-controller="reportModule">
    <div data-role="header" data-position="fixed">
        <a style="display:none"  href="#main" data-role="button" data-iconpos="notext" data-icon="home">Home</a>
        <h3>Calories Burn Report</h3>
        <a data-role="button" data-rel="back" data-iconpos="notext" data-icon="back">Back</a>
    </div>
    <div data-role="content">
        <div class="row-fluid">
            <span style="float:left"><a ng-click="cb_first_Prev()" data-role="button" data-iconpos="notext" data-icon="back">Pervious</a></span>
            <span style="float:right"><a ng-click="cb_first_Next()" data-role="button" data-iconpos="notext" data-icon="forward">Next</a></span>
        </div>
        <span class="datesetter" id="cb_first_ViewDate"></span>
        <div id="firstReport" style="margin-top:20%; margin-left:40%">
            <span id="cb_graphGaugeContainer"></span>
        </div>
        <div>
            <span class="datesetter"><strong>Today, You Burn:: </strong>{{ 1425 }}<strong> Calories</strong></span>
        </div>
    </div>
  </div>

  <script type="text/javascript"  charset="utf-8" src="includes/D3Lib/d3.js"></script>

<script type="text/javascript" charset="utf-8"  src="includes/D3Lib/gauge.js"></script>

<script type="text/javascript" src="sm_libraries/sm_custome/graphClass.js"></script>
</body>
</html>

顯示錯誤的Js類是

// JavaScript Document

var GraphClass =
{
    gauges:[],
    cal:0,
    createGauge:function(name, label, min, max)
    {
        var config = 
        {
           size: 120,label: label,min: undefined != min ? min : 0,max: undefined != max ? max : 100,minorTicks: 5
        }

    var range = config.max - config.min;
    config.yellowZones = [{ from: config.min + range*0.75, to: config.min + range*0.9 }];
    config.redZones = [{ from: config.min + range*0.9, to: config.max }];
    GraphClass.gauges[name] = new Gauge(name + "GaugeContainer", config); // **In this line it shows error in eclipse emulator but correct in browsers**
    GraphClass.gauges[name].render();
},
createGauges:function()
{
    GraphClass.createGauge("cb_graph", "Calories Burn",0,2600);
    GraphClass.createGauge("cn_graph", "Calories Gain",0,localStorage.getItem("DailyRequiredCalories"));
},
updateGauges:function()
{
    for (var key in GraphClass.gauges)
    {
        var value = GraphClass.getRandomValue(GraphClass.gauges[key]);
        GraphClass.gauges[key].redraw(value);
    }
},
getRandomValue:function(gauge)
{
    var overflow = 0; //10;
    console.log(gauge.config.min+" - "+overflow+" + ( "+gauge.config.max+" - "+gauge.config.min+" + "+overflow*2+")*"+Math.random());
    //return gauge.config.min - overflow + (gauge.config.max - gauge.config.min + overflow*2) *  Math.random();
    return GraphClass.cal;
},
initialize:function(cal)
{
    $('#cb_graphGaugeContainer').empty();
    $('#cn_graphGaugeContainer').empty();
    //alert(cal);
    GraphClass.cal = cal;
    GraphClass.createGauges();
    GraphClass.updateGauges();
}
}

Answer 1

Android路徑是相對於file：// android_asset / ...的。

如何從資產文件獲取URI？

Android混合應用中未顯示D3圖形

問題描述

1 個解決方案

解決方案1
0 2014-03-31 22:21:32

Android混合應用中未顯示D3圖形

問題描述

1 個解決方案

解決方案1 0 2014-03-31 22:21:32

解決方案1
0 2014-03-31 22:21:32