Question

我制作了一个简单的HTML文件，并将其添加到Android Studio中的assets文件夹中。直接在浏览器上查看时，该文件可以正常工作。但是，从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>

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

Answer 1

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

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

根据{{3}} ...

，

而不是jsapi

通过jsapi加载程序保留的Google图表版本不再一致更新。从现在开始请使用新的gstatic装载机。

这只会更改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>

Answer 2

即使示例MediaFoundation.NET中的ChartRangeFilter也无法在android浏览器上运行。因此，代码或库可能与其非功能性无关，而android可能还不支持它。

Google Chart范围过滤器控件无法在Android WebView中运行

2 个答案: