0

我试图通过 WebView 在 Android 中使用jqPlot，但我得到一个没有错误的空白 WebView。我正在从我的应用程序的资产目录中将一个简单的 HTML 文件加载到 WebView 中，然后尝试运行所需的 javascript 来创建图表。任何帮助/建议将不胜感激！

这是加载 WebView 的代码

private View getSimpleChartView() {
    View chartView = getLayoutInflater().inflate(R.layout.test_chart, null);

    TextView chartTitle = (TextView) chartView.findViewById(R.id.txtChartTitle);
    chartTitle.setText("Simple Chart");

    WebView webView = (WebView) chartView.findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebViewClient(new ChartWebViewClient());
    webView.loadUrl("file:///android_asset/jqplot_template.html");
    webView.loadUrl("javascript:" + getJqPlotJavascript());

    return chartView;
}

private String getJqPlotJavascript() {
    StringBuilder js = new StringBuilder();

    js.append("<script language=\"javascript\" type=\"text/javascript\" src=\"file:///android_asset/jqplot/jquery.min.js\"></script>\n");
    js.append("<script language=\"javascript\" type=\"text/javascript\" src=\"file:///android_asset/jqplot/jquery.jqplot.min.js\"></script>\n");
    js.append("<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///android_asset/jqplot/jquery.jqplot.css\" />\n");
    js.append("<script type=\"text/javascript\">");
    js.append("$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);\n");
    js.append("</script>");

    return js.toString();
}

jqplot_template.html

<html>
    <body>
        <div id="chartdiv" style="height:400px;width:300px;"></div>
    </body>
</html>
4

2 回答 2

1
  1. 将 jqplot 脚本和 css 引用放入 HTML。
  2. 按照 Jayesh 的建议调用 javascript onPageFinished（并将 webView 标记为 final）
  3. 从 javascript 字符串中删除包含的脚本标签
  4. 繁荣！

HTML

<html>
     <script language="javascript" type="text/javascript" src="file:///android_asset/jqplot/jquery.min.js"></script>
     <script language="javascript" type="text/javascript" src="file:///android_asset/jqplot/jquery.jqplot.min.js"></script>
     <link rel="stylesheet" type="text/css" href="file:///android_asset/jqplot/jquery.jqplot.css" />
    <body>
        <div id="chartdiv" style="height:400px;width:300px;"></div>
    </body>
</html>

爪哇

private View getSimpleChartView() {
    View chartView = getLayoutInflater().inflate(R.layout.test_chart, null);

    TextView chartTitle = (TextView) chartView.findViewById(R.id.txtChartTitle);
    chartTitle.setText("Simple Chart");

    final WebView webView = (WebView) chartView.findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.setWebViewClient(new WebViewClient(){
        @Override
        public void onPageFinished(WebView view, String url) {
            webView.loadUrl("javascript:" + getJqPlotJavascript());
            super.onPageFinished(view, url);
        }
    });
    webView.loadUrl("file:///android_asset/jqplot_template.html");

    return chartView;
}

private String getJqPlotJavascript() {
    StringBuilder js = new StringBuilder();
    // Just this line
    js.append("$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);\n");
    return js.toString();
}
于 2013-09-12T17:19:47.800 回答
0

当您使用加载 web 视图 webView.loadUrl("file:///android_asset/jqplot_template.html"); 时，加载页面需要一些时间。

由于页面可能未正确加载，因此无法立即调用 javascript 函数。

而是这样做：

webView.setWebViewClient(new WebViewClient(){`
    @Override
    public void onPageFinished(WebView view, String url) {
        webView.loadUrl("javascript:" + getJqPlotJavascript());

        super.onPageFinished(view, url);
    }
});

我希望这有帮助。

于 2013-06-19T16:51:59.630 回答