使用Javascript、jQuery和jqPlot在Android WebVew中制作图表_Javascript_Android_Jquery_Webview_Jqplot

使用Javascript、jQuery和jqPlot在Android WebVew中制作图表

javascript android jquery webview

使用Javascript、jQuery和jqPlot在Android WebVew中制作图表,javascript,android,jquery,webview,jqplot,Javascript,Android,Jquery,Webview,Jqplot,我试图通过WebView在Android中使用，但我得到的是一个没有错误的空白WebView。我正在将一个简单的HTML文件从我的应用程序的资产目录加载到WebView中，然后尝试运行所需的javascript来创建图表。如有任何帮助/建议，将不胜感激下面是加载WebView的代码 private View getSimpleChartView() { View chartView = getLayoutInflater().inflate(R.layout.test_chart, n

我试图通过WebView在Android中使用，但我得到的是一个没有错误的空白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();
}

private视图getSimpleChartView（）{
视图图表视图=GetLayoutFlater（）。充气（R.layout.test\u图表，空）；
TextView chartTitle=（TextView）chartView.findViewById（R.id.txtChartTitle）；
chartTitle.setText（“简单图表”）；
WebView WebView=（WebView）chartView.findviewbyd（R.id.WebView）；
webView.getSettings（）.setJavaScriptEnabled（true）；
setWebViewClient（新的ChartWebViewClient（））；
webView.loadUrl（“file:///android_asset/jqplot_template.html");
loadUrl（“javascript:+getJqPlotJavascript（））；
返回图表视图；
}
私有字符串getJqPlotJavascript（）{
StringBuilder js=新的StringBuilder（）；
js.append（“\n”）；
js.append（“\n”）；
js.append（“\n”）；
js.追加（“”）；
js.append（$.jqplot（'chartdiv'，[[1,2]，[3,5.12]，[5,13.1]，[7,33.6]，[9,85.9]，[11219.9]]）；\n）；
js.追加（“”）；
返回js.toString（）；
}

jqplot_template.html

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

当您使用

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);
    }
});

我希望这有帮助
将jqplot脚本和css引用放入HTML中
按照Jayesh的建议调用javascript onPageFinished（并将webView标记为final）
从javascript字符串中删除包含脚本的标记
轰
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();
}