javascript - Google 图表范围过滤器控件在 Android WebView 中不起作用-6ren

javascript - Google 图表范围过滤器控件在 Android WebView 中不起作用

转载作者：行者123 更新时间：2023-11-30 00:36:18

25

4

我制作了一个简单的 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，这里是主要 Activity 的 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");
}

最佳答案

对于初学者，推荐使用较新的库 loader.js

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

而不是 jsapi，根据 release notes ...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

这只会更改 load 语句，请参阅以下工作 fragment ...

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>

关于javascript - Google 图表范围过滤器控件在 Android WebView 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43358378/

25

4

0

文章推荐： MYSQL 两个具有非唯一列的表的内连接

文章推荐： c++ - 如何确定作为对象传递给另一个类的模板类的数据类型

文章推荐： mysql - 如何拒绝对单个 MySQL 表的 SELECT 权限？

文章推荐： c++ - 如何将 CArray (MFC) 移植到 linux

EXCEL 列/范围 A 的平均值如果列/范围 B 或列/范围 C 等于否
我不能解决这个问题。和标题说的差不多…… 如果其他两个范围/列中有“否”，我如何获得范围或列的平均值？换句话说，我想计算 A 列的平均值，并且我有两列询问是/否问题(B 列和 C 列)。我只希望 B
python - 2to3 范围(...) -> 列表(范围(...))
我知道 python 2to3 将所有 xrange 更改为 range 我没有发现任何问题。我的问题是关于它如何将 range(...) 更改为 list(range(...)) :它是愚蠢的，只是
java - session 范围 Bean 不是 session 范围 Bean
我有一个 Primefaces JSF 项目，并且我的 Bean 注释有以下内容: @Named("reportTabBean") @SessionScoped public class Report
ruby-on-rails-3 - 我可以在 Rails 中将常见的 ActiveRecord 范围(范围)与模块一起使用吗？
在 rails3 中，我在模型中制作了相同的范围。例如 class Common ?" , at) } end 我想将公共(public)范围拆分为 lib 中的模块。所以我试试这个。 module
jsf - 在另一个 View 范围 bean 中注入(inject)一个 View 范围 bean 会导致它被重新创建
我需要在另一个 View 范围 bean 中使用保存在 View 范围 bean 中的一些数据。 @ManagedBean @ViewScoped public class Attivita impl
JavaScript 范围
为什么下面的代码输出4？谁能给我推荐一篇好文章来深入学习 javascript 范围。这段代码返回4，但我不明白为什么？ (function f(){ return f(); functio
JavaScript 范围
我有一个与此结构类似的脚本 $(function(){ var someVariable; function doSomething(){ //here } $('#som
Jquery 范围
我刚刚开始学习 Jquery，但这些示例对我帮助不大...... 现在，以下代码发生的情况是，我有 4 个表单，我使用每个表单的链接在它们之间进行切换。但我不知道如何在第一个函数中获取变量“postO
JavaScript 范围/this
为什么当我这样做时: function Dog(){ this.firstName = 'scrappy'; } Dog.firstName 未定义？但是我可以这样做: Dog.firstNa
Python解析文本文件的选定区域/范围
我想打印文本文件 text.txt 的选定部分，其中包含: tickme 1.1(no.3) lesson1-bases lesson2-advancedfurther para:using the
Javascript "this"范围
我正在编写一些 JavaScript 代码。我对这个关键字有点困惑。如何在 dataReceivedHandler 函数中访问 logger 变量？ MyClass: { logger: nu
vba - 范围 - 更改引用
我有这个代码: Public Sub test() Dim Tgt As Range Set Tgt = Range("A1") End Sub 我想更改当前为“A1”的 Tgt 的引
regex - 范围> = 0但小于1000的正则表达式
我正忙于此工作，以为我会把它放在我们那里。该数字必须是最多3个单位和最多5个小数位的数字，等等。有效的 999.99999 99.9 9 0.99999 0 无效的 -0.1 999.123456
spring - 未注释的参数覆盖@???范围
覆盖代码时: @Override public void open(ExecutionContext executionContext) { super.open(executio
PHP preg_match 范围
我想使用 preg_match 来匹配数字 1 - 21。我如何使用 preg_match 来做到这一点？如果数字大于 21，我不想匹配任何东西。 example preg_match('([0-9]
具有特定开始和无限结束的 Clojure 范围
根据docs range函数有四种形式: (range) 0 - 无穷大 (range end) 0 - 结束 (range start end)开始 - 结束 (range start end st
iPhone 范围 slider
我知道有一个UISlider，但是有人已经制作了RangeSlider(用两个拇指吗？)或者知道如何扩展 uislider？最佳答案我认为你不能直接扩展 UISlider，你可能需要扩展 UICo
要列出的 Python 范围
我正在尝试将范围转换为列表。 nums = [] for x in range (9000, 9004): nums.append(x) print nums 输出 [9000] [9
typescript - 如何使用TypeScript方法装饰器并保留常规的 `this`范围
请注意:此问题是由于在运行我的修饰方法时使用了GraphQL解析器。这意味着this的范围为undefined。但是，该问题的基础知识对于装饰者遇到问题的任何人都是有用的。这是我想使用的基本装饰器(
JavaScript 范围/代码迭代不同步
我正在尝试创建一个工具来从网页上抓取信息(是的，我有权限)。到目前为止，我一直在使用 Node.js 结合 requests 和 Cheerio 来拉取页面，然后根据 CSS 选择器查找信息。我已经

首页

博学

6Ren·AI

商城

javascript - Google 图表范围过滤器控件在 Android WebView 中不起作用