Html图表不适合小型Android WebView

Question

Html图表不适合小型Android WebView

Loc*_* Le 8 html css android android-webview chart.js

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

圆形图的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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 1

如果图表是您在 web 视图中加载的唯一内容。您可以在获取 webview 的设置时使用setLoadWithOverviewMode，以使您的 webview 进入Overview mode，这意味着 html 内容的宽度将被设置为适合您的屏幕。您可以在这里查看完整的详细信息

代码会是这样的。（记住在将 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

Run Code Online (Sandbox Code Playgroud)

然后，最后将 HTML 加载到 Web 视图中

归档时间：	7 年，10 月前
查看次数：	374 次
最近记录：	7 年，9 月前