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

我试图在Android中通过WebView使用jqPlot，但是我得到一个没有错误的空白WebView。我从应用程序资产目录中加载一个简单的HTML文件到WebView，然后尝试运行所需的JavaScript来创建图表。任何援助/建议将非常感谢！使用Javascript，jQuery和jqPlot在Android WebVew中制作图表

这里是加载的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>

来源

2012-08-03 MJ.

当你使用 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-19 16:51:59

将jqplot脚本和css引用放入HTML中。
按照Jayesh的呼吁onPageFinished javascript的意见（和马克web视图作为最终）
从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>

的Java

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-12 17:19:47

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

回答

相关问题