852
【Android-數據報表】初級篇[讓Highcharts報表顯示在Android屏幕]
Highcharts 報表是至今我發現做得最好的報表之一。當然，可能還有更好的我沒發現。
此次我們就說說怎麼讓Highcharts顯示在Android設備上。
首先可以在官網查看文檔[官方文檔]此次我們以HighchartsTable為例，因為HighchartsTable相對來說使用較為簡單，隻需要引用幾個js，和寫一些html代碼即可。
首先我們可以看到文檔下麵有說明：
1，首先需要下載並引用必須的js文件，引用方法。
<script src="jQuery.js"></script>
<script src="highcharts.js"></script>
<script src="jquery.highchartTable.js"></script>
2，創建圖表渲染容器（div）。
<div ></div>
3，創建HTML表格代碼。
在<table>，你必須設置一些屬性，如圖表類型和圖表渲染容器等
其中數據列（Series）的名字在<thead>中定義，值在<tbody>中定義
<tr>的第一個<td>代表X軸（xAxis）的值，其他<td>代表每個係列的Y值（Value），示例代碼如下：
<table data-graph-container=".highchart-container2"
data-graph-type="line">
<caption>Column example</caption>
<thead>
<tr>
<th width="100px">Month</th>
<th width="100px">Sales</th>
<th widht="100px">Benefits</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>8000</td>
<td>2000</td>
</tr>
<tr>
<td>February</td>
<td>12000</td>
<td>3000</td>
</tr>
<tr>
<td>March</td>
<td>18000</td>
<td>4000</td>
</tr>
<tr>
<td>April</td>
<td>2000</td>
<td>-1000</td>
</tr>
<tr>
<td>May</td>
<td>500</td>
<td>-2500</td>
</tr>
</tbody>
</table>
最後，在Table上調用highchartTable()函數即可，代碼如下
$(document).ready(function() {
$('table.highchart').highchartTable();
});
這裏代碼中需要注意的是：
1，data-graph-container=".highchart-container2"的值是直接飲用的上麵所定義class的名稱：<div ></div>所以這兩個名字必須一致。
2，下麵調用函數時$('table.highchart').highchartTable();中的('table.highchart')直接調用的上麵table的class名稱。
所以記得一一對應，否則不能出效果。
如果上述步驟都沒問題就應該可以看到如下效果圖：
關於其它一些屬性可以去官網查看。
下麵給出js下載地址：
js下載地址：https://download.csdn.net/detail/gulaer/7251053
項目下載地址：https://download.csdn.net/detail/gulaer/7251147
以上是js使用html方式顯示。
下麵說說在怎麼在Android中顯示，其實很簡單，就是WebView顯示本地html文件而已。
使用挺簡單，直接給出代碼。
但是前提需要把上麵的項目下載地址中的所有文件(三個js文件和一個html文件)拷貝至Android項目中的assets目錄下。
然後寫Webview調用關鍵代碼：
mWebView.getSettings().setSupportZoom(true);
mWebView.getSettings().setLoadWithOverviewMode(true);
mWebView.getSettings().setUseWideViewPort(true);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.getSettings().setDefaultTextEncodingName("UTF-8");
mWebView.getSettings().setSupportMultipleWindows(true);
mWebView.getSettings().setLoadsImagesAutomatically(true);
mWebView.setWebViewClient(new WebViewClient() {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
mWebView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
mProgressBar.setProgress(newProgress);
mProgressBar.postInvalidate();
if (newProgress == 100) {
mProgressBar.setVisibility(View.GONE);
}
}
});
@Override
public void onStart() {
super.onStart();
loadUrl(mWebUrl);
}
private void loadUrl(String url) {
if (mWebView != null) {
mWebView.loadUrl(url);
}
}
然後運行效果圖：
Android項目地址：https://download.csdn.net/detail/gulaer/7251195
項目中包含其它兩種報表，包括3D報表。
最後更新：2017-04-03 12:56:23