使用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中製作圖表

回答

相關問題