D3图表未在Android混合应用程序中显示

D3 Graph Not Display in Android Hybrid App

本文关键字：混合 应用程序 显示 Android D3      更新时间：2023-09-26

我在Android混合应用程序中使用D3 Graphs。当这个应用程序在浏览器中运行时，它显示出完美的结果，但当我为android移动设备设置并在Emulator上测试时，它不会显示图表，在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();
}
}

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

如何从资产文件中获取URI？

相关文章：