Javascript Google图表范围筛选器控件在Android WebView中不起作用_Javascript_Android_Html_Webview_Google Visualization

Javascript Google图表范围筛选器控件在Android WebView中不起作用

javascript android html webview google-visualization

Javascript Google图表范围筛选器控件在Android WebView中不起作用,javascript,android,html,webview,google-visualization,Javascript,Android,Html,Webview,Google Visualization,我制作了一个简单的HTML文件，并将其添加到我的Android Studio中的资产文件夹中。直接在浏览器上查看该文件时，效果非常理想。但是，当从webview内部或在移动设备或模拟器中查看时，Google图表范围控件根本不可拖动。图表看起来不错，但控件已冻结。在这个问题上我找不到任何帮助，所以如果有人能给我一些建议，我将不胜感激我已经在webview上启用了Javascript，jsapi.js也在assets文件夹的本地。同样，图表看起来不错。只是范围控制不起作用。有什么想法吗？HTML代

我制作了一个简单的HTML文件，并将其添加到我的Android Studio中的资产文件夹中。直接在浏览器上查看该文件时，效果非常理想。但是，当从webview内部或在移动设备或模拟器中查看时，Google图表范围控件根本不可拖动。图表看起来不错，但控件已冻结。在这个问题上我找不到任何帮助，所以如果有人能给我一些建议，我将不胜感激

我已经在webview上启用了Javascript，jsapi.js也在assets文件夹的本地。同样，图表看起来不错。只是范围控制不起作用。有什么想法吗？HTML代码如下所示：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<script type='text/javascript' src='jsapi.js'></script>
<!--TO TEST LOCALLY IN A BROWSER, USE THE LINE BELOW-->
<!--script type="text/javascript" src="https://www.google.com/jsapi"></script-->    
<script type="text/javascript">
google.load('visualization', '1.0', {packages: ['controls']});
google.setOnLoadCallback(makeChart);
function makeChart( )
{
   var maxWidth = 400;
   var maxHeight = 400;
   var data = new google.visualization.DataTable();
   data.addColumn('number', 'Stock');
   data.addColumn('number', 'Profit');
    for(var x=10;x<50;x++){
        data.addRow([x, x+1]);
    }
   var rangeFilter = new google.visualization.ControlWrapper({
   controlType: 'ChartRangeFilter',
   containerId: 'range_filter_div',
   options:{
            filterColumnIndex: 0,
            ui: {
                chartOptions:{
                width: maxWidth,
                height: 50,
                chartArea: { width: '75%' }
                },
            minRangeSize: 1
        }
   },
   view: { columns: [0, 1] }
   }); 
   var chart = new google.visualization.ChartWrapper({
   chartType: 'LineChart',
   containerId: 'chart_div',
   options: {
       width: maxWidth,
       height: maxHeight,
       chartArea: { width: '75%' },
       vAxis:{title:'Left Label'},
       hAxis:{title:'Bottom Label'},
       legend: 'none'
       }
   });
   var dash = new google.visualization.Dashboard(document.getElementById('dashboard'));
   dash.bind([rangeFilter], [chart]);
   dash.draw(data);
} 
</script> 
</head>
<body>
<div id='dashboard'>
<div id='chart_div'></div>
<div id='range_filter_div'></div>
</div> 
</body>
</html>

对于初学者，建议使用较新的库

loader.js

<script src="https://www.gstatic.com/charts/loader.js"></script>

即使示例中的ChartRangeFilter在android浏览器上也不起作用。因此，代码或库可能与其非功能性无关，android可能还不支持它。

对此表示怀疑，主要是添加了代码片段，以便我可以在手机上进行测试——但“运行代码片段”按钮在那里不可用……感谢WhiteHat，要将此代码作为应用程序运行，您必须将上面的HTML文件和loader.js include添加到空Android项目的assets文件夹中，然后将简单的WebView添加到空白活动中。向WebView授予Javascript权限，然后加载HTML文件。我将把jsapi.js文件更新为loader.js，看看今晚是否有效……我刚刚用新的loader.js代码尝试了一下，效果也一样好。但是，不幸的是，范围控制在webview内部仍然不起作用。您提到要作为应用程序运行，必须将loader.js添加到assets文件夹中--您正在本地下载文件，无法从正常url运行？--我知道

'controls'

包执行对其服务器的请求，它是否有权这样做？我只是尝试使用CDN而不是对本地资产文件夹的引用。图表仍然有效，因此不必使用“资产”文件夹，但不幸的是，控件仍然处于冻结状态。

<script src="https://www.gstatic.com/charts/loader.js"></script>