Android Hybrid App 中不显示 D3 图形答案

【问题标题】：D3 Graph Not Display in Android Hybrid AppAndroid Hybrid App 中不显示 D3 图形
【发布时间】：2014-04-01 13:19:29
【问题描述】：

我在我的 Android Hybrid 应用程序中使用 D3 Graphs。当这个应用程序在浏览器中运行时，它显示了完美的结果，但是当我为 android mobile 设置并在 Emulator 上进行测试时，它没有显示 graphe，在 LogCat 中它显示了这个错误，但是当这个应用程序在 chrome、firefox 中运行时不会出现这个错误/p>

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();
}
}

【问题讨论】：

一个简单的例子对你有用吗？
不，它也不起作用@LarsKotthoff
这表明某些事情根本上是错误的。 This question 可能会有所帮助。

标签： javascript android cordova d3.js

【解决方案1】：

Android 路径是相对于文件：//android_asset/...以下链接将有所帮助。

How to get URI from an asset File?

【讨论】：