Html图表不适合小型Android WebView

I have a WebView where Width and Height is 25dp. In this small WebView I want to show a circle digram from Chart.js, but it does not resize to fit the small WebView I have created.

我有一个WebView，其宽度和高度为25dp。在这个小的WebView中，我想从Chart.js中显示一个圆形图，但它没有调整大小以适应我创建的小型WebView。

the HTML for the circle chart:

圆形图的HTML：

<!doctype html>
<html>
    <head>
        <script src="chart.min.js"></script>
        <style>
            html, body
        {
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="myChart" style="width:100%; height:80%;"></canvas>      

    <script>

        var chartData = [
  dataprotein,
  datafat,
  datacarb
];

        var data = {
        datasets: [{
                borderWidth: 0,
                data: chartData,
                    backgroundColor: [
                        '#FF604E',
                        '#4666FF',
                        '#47CC6F',
                    ]

            }],

        };

        var ctx = document.getElementById('myChart').getContext('2d');
        var chart = new Chart(ctx, {
            // The type of chart we want to create
            type: 'pie',

            // The data for our dataset
            data: data
        });

    </script>
</body>

3 个解决方案

#1

If the chart is the only thing you load up in webview. You can use setLoadWithOverviewMode when getting the settings for the webview to enable your webview to go into Overview mode which means the html content's width will be set to fit your screen. you can checkout the full detail here

如果图表是您在webview中加载的唯一内容。获取webview的设置时，可以使用setLoadWithOverviewMode，以使webview进入概览模式，这意味着html内容的宽度将设置为适合您的屏幕。你可以在这里查看完整的细节

The code would be like this. (Remember to set it before you load your HTML content into webview)

代码就是这样的。（记得在将HTML内容加载到webview之前设置它）

webView.getSettings().setJavaScriptEnabled(true); //enable it since you're using js to create your chart
webView.getSettings().setCacheMode(WebSettings.LOAD_DEFAULT); 
webView.getSettings().setDomStorageEnabled(true); //incase you're using some DOM in your js
webView.getSettings().setLoadWithOverviewMode(true); //This code load your webview into overview mode, fit your html to the screen width

and afterwards, finally load your HTML to your webview

然后，最后将HTML加载到您的webview中

#2

-1

you can use this code to show a circle diagram from Chart.js

您可以使用此代码显示Chart.js中的圆形图

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSettings().setUseWideViewPort(true);
webView.getSettings().setDomStorageEnabled(true);

webView.setWebViewClient(new WebViewClient(){

    @Override
    public boolean shouldOverrideUrlLoading (WebView view, String url) {

        progDailog.show();
        view.loadUrl(url);

        return true;
    }

    @Override
    public void onPageFinished(WebView view, final String url) {
        progDailog.dismiss();
    }
});

webView.loadUrl(url);

#3

-1

    webView.getSettings().setJavaScriptEnabled(true);
    webView.getSettings().setLoadWithOverviewMode(true);
    webView.getSettings().setUseWideViewPort(true);
    webView.getSettings().setDomStorageEnabled(true);

#1