Элемент управления фильтра диапазона Google Chart не работает в Android WebView

Я сделал простой HTML-файл и добавил его в свою папку ресурсов в моей Android Studio. Файл отлично работает при просмотре прямо в браузере. Однако при просмотре изнутри веб-просмотра или с мобильного устройства или эмулятора элементы управления диапазона диаграммы Google вообще не перетаскиваются. Диаграмма выглядит хорошо, но элементы управления заморожены. Я не могу найти никакой помощи по этому вопросу, поэтому я был бы признателен, если бы кто-нибудь дал мне несколько советов.

Я включил Javascript в веб-представлении, и файл jsapi.js также является локальным в папке ресурсов. Опять же, график выглядит хорошо. Это просто контроль диапазона, который не работает. Есть идеи? 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>

Чтобы включить Javascript в WebView, вот код 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");
}
Источник

1 ответ

Для начала рекомендую использовать более новую библиотеку loader.js

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

вместо jsapi в соответствии с примечаниями к выпуску...

Версия Google Charts, которая остается доступной через jsapi загрузчик больше не обновляется последовательно. Пожалуйста, используйте новый 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>

Источник

Даже ChartRangeFilter в примере https://developers.google.com/chart/interactive/docs/gallery/controls не работает в браузере Android. Таким образом, код или библиотека могут не иметь ничего общего с его нефункциональностью, они просто могут еще не поддерживаться Android.

Источник
Другие вопросы по тегам