我有一个 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>
最佳答案
如果图表是您在 webview 中加载的唯一内容。您可以在获取 webview 的设置时使用 setLoadWithOverviewMode 使您的 webview 进入 Overview 模式，这意味着 html 内容的宽度将被设置为适合您的屏幕。你可以查看完整的细节here
代码应该是这样的。 (记得在将 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
然后，最后将您的 HTML 加载到您的 webview
关于android - HTML 图表不适合小的 Android WebView，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48192479/