android - 无法在 Android Webview 上缩放和滚动 Google 图表

问题描述

我想使用 webview 在我的 android 应用程序中实现 Google Charts。我有一个 HTML 文件，它在 Google Chrome 上运行良好，带有所有缩放和滚动控件，但是当我在 webview 上实现它时，我可以查看折线图，但缩放和滚动功能不起作用。

没有在 Android webview 上实现缩放和滚动功能的正确方法。

缩放.html

<!DOCTYPE html>
<html>
<body>
    <div id="chart_div" style="width: 500px; height: 300px;"></div>
  </body>
  <head>
    <title>gfifhg</title>
  </head>
</html>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
       google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
         ['Year', 'Sales'],
          [new Date(2001,01,01),  30],
          [new Date(2002,01,01),  70],
          [new Date(2003,01,01),  45],
          [new Date(2004,01,01),  99],
          [new Date(2005,01,01),  22],
          [new Date(2006,01,01),  0],
          [new Date(2007,01,01),  89],
          [new Date(2008,01,01),  30],
          [new Date(2009,01,01),  32],
          [new Date(2010,01,01),  77],
          [new Date(2011,01,01),  67],
          [new Date(2012,01,01),  22],
          [new Date(2013,01,01),  23],
          [new Date(2014,01,01),  25],
          [new Date(2015,01,01),  9],
          [new Date(2016,01,01),  10],
          [new Date(2017,01,01),  77],
          [new Date(2018,01,01),  47],
          [new Date(2019,01,01),  22],
          [new Date(2020,01,01),  23],
          [new Date(2022,01,01),  12],
          [new Date(2023,01,01),  9],
          [new Date(2024,01,01),  10],
          [new Date(2025,01,01),  10],
          [new Date(2026,01,01),  77],
          [new Date(2027,01,01),  67],
          [new Date(2028,01,01),  22],
          [new Date(2029,01,01),  23],
          [new Date(2030,01,01),  34],
          [new Date(2031,01,01),  9],
          [new Date(2032,01,01),  10],
          [new Date(2033,01,01),  22],
          [new Date(2034,01,01),  23],
          [new Date(2035,01,01),  19],
          [new Date(2036,01,01),  12],
          [new Date(2037,01,01),  10],
          [new Date(2038,01,01),  17],
          [new Date(2039,01,01),  6],
          [new Date(2040,01,01),  6],
          [new Date(2041,01,01),  22],
          [new Date(2042,01,01),  23],
          [new Date(2043,01,01),  71],
          [new Date(2044,01,01),  9],
          [new Date(2045,01,01),  10],
          [new Date(2046,01,01),  78],
          [new Date(2047,01,01),  67],
          [new Date(2048,01,01),  22],
          [new Date(2049,01,01),  23],
          [new Date(2050,01,01),  12],
          [new Date(2051,01,01),  13],
          [new Date(2052,01,01),  10],
          [new Date(2053,01,01),  77],
          [new Date(2054,01,01),  47],
          [new Date(2055,01,01),  22],
          [new Date(2056,01,01),  23],
          [new Date(2057,01,01),  12],
          [new Date(2058,01,01),  9],
          [new Date(2059,01,01),  10],
          [new Date(2060,01,01),  10],
          [new Date(2061,01,01),  76],
          [new Date(2062,01,01),  67],
          [new Date(2063,01,01),  22],
          [new Date(2064,01,01),  23]

        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: '#333'},
                   slantedText:true, slantedTextAngle:80},
          vAxis: {minValue: 0},
          explorer: {
            //actions: ['dragToZoom', 'rightClickToReset'],
            //maxZoomIn: 2.0,
            //maxZoomOut:2,
            axis: 'horizontal',
            keepInBounds: true},
          colors: ['#D44E41'],
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

GraphActivity.java

public class GraphActivity extends AppCompatActivity {

    WebView webview;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_graph);
        webview = findViewById(R.id.web_graph);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.loadUrl("file:///android_asset/zoom.html");
    }
}

Google Chrome 上的图像放大缩小

Android上的图像，Webview 上的Webview折线图

标签： androidgoogle-visualizationandroid-webview

android - 无法在 Android Webview 上缩放和滚动 Google 图表

问题描述

解决方案

推荐阅读