Question

我启用了javascript WebView ChromeWebClient，他们显示了Chart.Js饼图。将选项设置为animation：false后，停止显示图表。

var pieOptions = {
            animation : false
        }
        window.onload = function(){
            var ctx1 = document.getElementById("chart-area1").getContext("2d");
            window.myPie1 = new Chart(ctx1).Pie(pieData,pieOptions);

            var ctx2 = document.getElementById("chart-area2").getContext("2d");
            window.myPie2 = new Chart(ctx2).Pie(pieData);
        };

第一个带有禁用动画的饼图不显示，第二个饼图显示。两者都在桌面Chrome上显示正常。顺便说一句，我正在使用Android 4.4.4设备。点击动画图表所在的位置后，它会自动显示（我想用触摸事件刷新图表）。

我错过了什么或这是一个错误吗？

Answer 1

我在Android WebView renders blank/white上尝试了这个答案，它解决了这个问题。基本上我们告诉WebView避免使用硬件渲染：

webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

Answer 2

除了接受的答案，我还必须为我的webView启用javascript：

        webView.getSettings().setJavaScriptEnabled(true);

Answer 3

根据此处的上一个答案以及其他帖子中的其他答案，我最终获得了下面的代码，对我来说很好用。

请注意，我的HTML是存储为字符串的完整“页面”。我的项目中有/assets/html/下的资产，用作我的基本网址。资产包括CSS，其他JS文件等。

// Reference the webview
WebView webView = view.findViewById(R.id.webView);
// Avoid hardware rendering (force software rendering)
webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);

// Reference settings so we can change some
WebSettings settings = webView.getSettings();

// Enable items needed for proper chartJS execution
settings.setJavaScriptEnabled(true);
settings.setDomStorageEnabled(true);
settings.setAllowUniversalAccessFromFileURLs(true);
settings.setAllowFileAccessFromFileURLs(true);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

// Load the chartJS HTML (from a class property)
String html = mHtml;
// Load the HTML into the webView (note the other needed files reside: css, js, etc.)
webView.loadDataWithBaseURL("file:///android_asset/html/", html, "text/html", "UTF-8", null);
// Set to white, the default html bkg color
webView.setBackgroundColor(Color.WHITE);

如果动画设置为false，则Chart.js不会显示在Android Webview上

3 个答案: