Google Chart Range Filter Control ne fonctionne pas dans Android WebView

J'ai créé un fichier HTML simple et l'ai ajouté à mon dossier d'actifs dans mon Android Studio. Le fichier fonctionne parfaitement lorsqu'il est affiché directement sur un navigateur. Toutefois, lorsque vous les visualisez depuis l'intérieur d'une vue Web ou dans un appareil mobile ou un émulateur, les contrôles de plage de graphiques Google ne sont pas déplaçables du tout. Le graphique semble correct, mais les contrôles sont gelés. Je ne trouve pas d'aide sur ce sujet, donc j'apprécierais que quelqu'un puisse me donner des conseils.Google Chart Range Filter Control ne fonctionne pas dans Android WebView

J'ai activé le Javascript sur le webview et le jsapi.js est aussi local dans le dossier assets. Encore une fois, le graphique a l'air bien. C'est juste le contrôle de gamme qui ne fonctionne pas. Des idées? Le code HTML est comme suit:

<!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>

Pour activer JavaScript sur la WebView, voici le code onCreate pour l'activité principale:

@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"); 
}

Source

2017-04-12 Valtinho

pour commencer, vous recommandons d'utiliser la nouvelle bibliothèque loader.js

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

au lieu de jsapi, selon la release notes ...

La version de Google Maps qui reste disponible via le chargeur jsapi n'est plus mise à jour de manière cohérente. Veuillez utiliser le nouveau loader gstatic à partir de maintenant.

cela ne changera la déclaration load, voir ci-dessous extrait de travail ...

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>

Source

2017-04-12 11:57:33 WhiteHat

doute que cela aidera, surtout ajouté l'extrait afin que je puisse tester sur mon téléphone - - mais le bouton _Run code snippet_ n'est pas disponible ... – WhiteHat

Merci WhiteHat, pour exécuter ce code en tant qu'application vous devez ajouter le fichier HTML ci-dessus et le loader.js inclure dans le dossier assets d'un projet Android vide, puis ajoutez un simple WebV regardez une activité vide. Accordez des autorisations Javascript à WebView, puis chargez le fichier HTML. Je vais mettre à jour le fichier jsapi.js à loader.js et voir si cela fonctionne ce soir ... – Valtinho

Je viens de l'essayer avec le nouveau code loader.js et ça marche tout aussi bien. Mais, le contrôle de la plage ne fonctionne toujours pas du tout à l'intérieur de webview, malheureusement. – Valtinho

Google Chart Range Filter Control ne fonctionne pas dans Android WebView

Répondre

Questions connexes