Question

我试图在ViewView的片段内的webView中显示带有chart.js的图表。

这是我的代码（我尝试了不同的方法

@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（返回正确的字符串）：

    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>

Answer 1

This answer解决了我的图表未被绘制的问题。尝试在WebView上禁用硬件加速渲染：

webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Android：用于Chart.js的JavaScript的WebView无法正常工作

1 个答案: