谷歌圖表範圍過濾器控制不工作在Android WebView內

我做了一個簡單的HTML文件，並將其添加到我的Android Studio中的資產文件夾。直接在瀏覽器上查看時，該文件可以很好地工作。但是，從webview內部或移動設備或模擬器中查看時，Google圖表範圍控件根本無法拖動。圖表看起來不錯，但控件被凍結。我在這個問題上找不到任何幫助，所以如果有人能給我一些建議，我將不勝感激。谷歌圖表範圍過濾器控制不工作在Android WebView內

我已經在web視圖上啓用了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>

要在WebView中啓用Javascript，這裏是主要的活動的onCreate代碼：

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
    WebView wv = (WebView) findViewById(R.id.myWebView); 

    //JavaScript is disabled on webviews by default 
    WebSettings ws = wv.getSettings(); 
    ws.setJavaScriptEnabled(true); 

    wv.loadUrl("file:///android_asset/index.html"); 
}

來源

2017-04-12 Valtinho

對於初學者，建議使用較新的庫loader.js

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

代替jsapi，根據release notes ...

通過jsapi加載程序保持可用的Google圖表版本不再一致地更新。請從現在開始使用新的gstatic loader。

這隻會改變load聲明，請參閱下面的工作片段...

google.charts.load('current', { 
 
    callback: makeChart, 
 
    packages: ['controls'] 
 
}); 
 

 
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 src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div"></div> 
 
<div id="range_filter_div"></div> 
 
<div id="dashboard"></div>

來源

2017-04-12 11:57:33 WhiteHat

疑問，這將幫助，主要是添加的片段，所以我可以在我的手機測試 - - 但_Run代碼snippet_按鈕不可用那裏... – WhiteHat

感謝WhiteHat，作爲一個應用程序運行此代碼，你必須添加上面的HTML文件和loader.js包括到一個空的Android項目的資產文件夾，然後添加一個簡單的WebV查看空白活動。爲WebView賦予Javascript權限，然後加載HTML文件。我會將jsapi.js文件更新到loader.js，看看它是否能在今晚運行... – Valtinho

我剛剛用新的loader.js代碼嘗試了它，它的工作原理也一樣好。但是，不幸的是，範圍控制仍然不能在webview中運行。 – Valtinho

谷歌圖表範圍過濾器控制不工作在Android WebView內

回答

相關問題