Ich versuche, die Charts.js-Bibliothek in meiner Android-App in einem Webview zu verwenden. Ich habe versucht, es in charsnew.js Bibliothek zu ändern, aber ich bekomme den gleichen Fehler und das Diagramm wird nicht in meiner App geladen.Chrom-Fehler: - 6 Charts.js/Chartnew.js
D/Chrom: Unbekannt Chrom Fehler: -6
Ich habe versucht, alle Foren und Fragen vor gepostet suchen, versuchte doppelt überprüfen, ob die URL meiner Datei korrekt ist und dass die JavaScript ist auch im Innern aktiviert.
Die App verwendete ursprünglich eine Ajax-Anfrage, um Daten zu ziehen, aber da die Dinge nicht funktionierten, habe ich versucht, die statischen Daten zu setzen. Die Diagramme laden und zeigen, wenn ich die Datei direkt in Chrome öffne. Aber zeigt eine leere Leinwand in Android-Webview.
HTML Datei angehängt:
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../general/js/ChartNew.js"></script>
<script src="../general/js/shapesInChart.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<canvas id="myChart" width="400" height="400"></canvas>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
options = {
//Boolean - If we show the scale above the chart data
scaleOverlay : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : false,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : null,
//Number - The value jump in the hard coded scale
scaleStepWidth : null,
//Number - The scale starting value
scaleStartValue : null,
//String - Colour of the scale line
scaleLineColor : "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels : false,
//Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily : "'Arial'",
//Number - Scale label font size in pixels
scaleFontSize : 12,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
//Number - Spacing between each of the X value sets
barValueSpacing : 5,
//Number - Spacing between data sets within X values
barDatasetSpacing : 1,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null
};
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [28,48,40,19,96,27,100]
}
]
}
ctx = $("#myChart").get(0).getContext("2d");
myNewChart = new Chart(ctx).Bar(data, options);
});
</script>
</html>
EDIT 1:
ok So war ich nicht in der Lage, die lokale HTML-Datei innerhalb der Android-Web-Ansicht zu laden, egal, was ich versuchte. Aber dann ging ich weiter und versuchte meinen Code zu modifizieren, um die dynamischen Daten von einer Ajax-Anfrage zu bekommen. Überraschenderweise wird gestartet auf den dynamischen Daten arbeiten
Hier ist mein Code für den dynamischen Zug ist:
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="../general/js/Chart.js"></script>
<script src="../general/js/Chartjs.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<canvas id="myChart" width="350" height="350"></canvas>
<script type="text/javascript" charset="utf-8">
var id=replaceName;
var regDate = replaceDate;
$(document).ready(function() {
$.ajax({
url:"<serverurl>customer/betGetBloodPressure.jsp",
data:{"id":id,"regDate":regDate},
type:"post",
dataType:"jsonp",
jsonp: "callback",
success: function(res) {
options = {
//Boolean - If we show the scale above the chart data
scaleOverlay : false,
//Boolean - If we want to override with a hard coded scale
scaleOverride : true,
//** Required if scaleOverride is true **
//Number - The number of steps in a hard coded scale
scaleSteps : 3,
//Number - The value jump in the hard coded scale
scaleStepWidth : 50,
//Number - The scale starting value
scaleStartValue : 0,
//String - Colour of the scale line
scaleLineColor : "rgba(0,0,0,.1)",
//Number - Pixel width of the scale line
scaleLineWidth : 1,
//Boolean - Whether to show labels on the scale
scaleShowLabels : true,
//Interpolated JS string - can access value
scaleLabel : "<%=value%>",
//String - Scale label font declaration for the scale label
scaleFontFamily : "'sans-serif'",
//Number - Scale label font size in pixels
scaleFontSize : 12,
//String - Scale label font weight style
scaleFontStyle : "normal",
//String - Scale label font colour
scaleFontColor : "#666",
///Boolean - Whether grid lines are shown across the chart
scaleShowGridLines : true,
//String - Colour of the grid lines
scaleGridLineColor : "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth : 1,
//Boolean - If there is a stroke on each bar
barShowStroke : true,
//Number - Pixel width of the bar stroke
barStrokeWidth : 2,
//Number - Spacing between each of the X value sets
barValueSpacing : 5,
//Number - Spacing between data sets within X values
barDatasetSpacing : 0,
//Boolean - Whether to animate the chart
animation : true,
//Number - Number of animation steps
animationSteps : 60,
//String - Animation easing effect
animationEasing : "easeOutQuart",
//Function - Fires when the animation is complete
onAnimationComplete : null,
spaceBetweenBar : 0 ,
// String or array - fill color when hovered
hoverBackgroundColor: "rgba(255,99,132,0.4)",
// String or array - border color when hovered
hoverBorderColor: "rgba(255,99,132,1)"
};
var data = {
labels : ['MIN BP', 'AVERAGE BP', 'MAX BP'],
datasets :
[
{
label: 'Max Average Of Age #',
fillColor: '#a280ff',
data: [parseInt(res.aoa_lower_low),parseInt(res.aoa_avg_low),parseInt(res.aoa_higer_low)],
yAxisID: "y-axis-0"
},
{
label: 'My Info. #',
fillColor: '#7c4dff',
data: [parseInt(res.my_low),parseInt(res.my_avg),parseInt(res.my_high)]
},
{
label: 'Min Average Of Age #',
fillColor: '#6933ff',
data: [parseInt(res.aoa_lower_high),parseInt(res.aoa_avg_high),parseInt(res.aoa_higer_high)]
}
]
};
scaleSteps = 10;
ctx = $("#myChart").get(0).getContext("2d");
myNewChart = new Chart(ctx).Bar(data,options);
}
});
});
</script>
</html>
nun mit einem letzten Problem habe Schwierigkeiten, wie im Screenshot meines Diagramm erscheint gesehen, ist aber nicht in der Lage, die Label-Werte zu zeigen, die mir zeigen können, was jede meiner Farben als "Label" -Parameter im obigen Code innerhalb der Datensätze definiert. Sieht so aus, als ob ich etwas vermisse, was ich in meinen Optionen definieren muss, aber nicht in der Lage bin herauszufinden, was. Bitte helfen
Graph pulled from AJAX Request
Haben Sie die HTML-Seite im Assets-Ordner abgelegt? Wo ist die js? –
Ja, die HTML-Seite befindet sich im Ordner "Assets" und die URL heißt korrekt I/url: file: ///android_asset/hellog_chart/bloodPresure.html ...... Die js befindet sich ebenfalls im Ordner "Assets" -> general ---> JS –
Haben Sie die INTERNET-Berechtigung in Manifest hinzugefügt? –