2
chart.js 인 차트를 ViewPager의 Fragment 내에있는 webView 내에 표시하려고합니다.Android : Chart.js 용 JavaScript가 포함 된 WebView가 제대로 작동하지 않습니다.
private String createHtml() {
StringBuilder buf = new StringBuilder();
InputStream htmlIn;
String html = "";
try {
htmlIn = getActivity().getAssets().open("grafico.html");
BufferedReader in = new BufferedReader(new InputStreamReader(htmlIn, "UTF-8"));
String str;
while ((str=in.readLine()) != null) {
buf.append(str);
}
in.close();
html = buf.toString();
} catch (IOException e) {
e.printStackTrace();
return null;
}
StringBuilder labels = new StringBuilder();
StringBuilder points = new StringBuilder();
for (ArrayList<Location> segment : session.getRoute()) {
for (Location location : segment) {
labels.append("\"\",");
points.append(String.format(Locale.US, "%.4f", location.getSpeed()) + ",");
}
}
labels.deleteCharAt(labels.lastIndexOf(","));
points.deleteCharAt(points.lastIndexOf(","));
html = html.replaceAll("xx1xx", "100");
html = html.replaceAll("xx2xx", "100");
html = html.replaceAll("xx3xx", labels.toString());
html = html.replaceAll("xx4xx", points.toString());
return html;
}
그리고이 grafico.html입니다 :
<!doctype html>
<html>
<head><title>Line Chart</title>
<script type="text/javascript" src="file:///android_asset/Chart.js"></script>
</head>
<body>
<div style="width:95%">
<div>
<canvas id="canvas" height="100" width="100"></canvas>
</div>
</div>
<script>
var randomScalingFactor = function(){
return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["asd","sdf","dfg","fgh"],
datasets : [
{
label : "",
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(60,60,60,1)",
data : [1,2,3,4]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive : true,
pointDot : false
});
}
</script>
</body>
이
내가@Override
public void onViewCreated(View view, Bundle savedInstanceState) {
webView = (WebView) getView().findViewById(R.id.webview);
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN){
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
webView.getSettings().setAllowFileAccessFromFileURLs(true);
}
webView.getSettings().setJavaScriptEnabled(true);
String htmlGrafico = createHtml();
/*
* this always shows white page
*/
webView.loadData(htmlGrafico, "text/html", "UTF-8");
/*
* this shows the chart only if I tap on the tab between
* the start and the end of the chart animation.
* Otherwise is white page.
*
* However this is not a possible solution because I
* must use my datas to build the chart and this shows
* static html
*/
webView.loadUrl("file:///android_asset/grafico.html");
/*
* I even tried to create a file with the HTML I need
* (a chart with the right data) and then retrieve it
* by its path but it is white page.
*/
webView.loadUrl(urlHtmlGrafico);
super.onViewCreated(view, savedInstanceState);
}
createHtml가 (정확한 문자열)을 반환
을 시도했습니다 다른 방법으로 (내 코드입니다
비슷한 문제가 발생하여 차트 유형 (선, 파이 등)의 두 번째 매개 변수 (옵션)와 관련이 있다고 생각합니다. . 필자는 파이 (데이터)를 할 수 있지만 작동하지만 파이 (데이터, {애니메이션 : false})는 화면을 터치 할 때까지 표시되지 않습니다. – momo
내 관련 질문 http://stackoverflow.com/q/26379667/801913 – momo