1
我在我的Android混合應用程序中使用D3圖形。當這個應用程序在瀏覽器中運行時，它顯示完美的結果，但是當我設置爲Android移動和測試仿真程序，然後它不顯示石墨，並在LogCat它顯示此錯誤，但此錯誤不會出現時，此應用程序運行在鉻，火狐在Android混合應用程序中不顯示D3圖形
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上一個簡單的例子的工作？ –
不，它也不起作用@LarsKotthoff – Blu
這表明某些東西是根本錯誤的。 [這個問題]（http://stackoverflow.com/questions/11617215/d3-js-visualization-on-android-2-3）可能會有所幫助。 –