【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 class="highchart-container2"></div>

3，创建HTML表格代码。

在<table>，你必须设置一些属性，如图表类型和图表渲染容器等
其中数据列（Series）的名字在<thead>中定义，值在<tbody>中定义
<tr>的第一个<td>代表X轴（xAxis）的值，其他<td>代表每个系列的Y值（Value），示例代码如下：

<table class="highchart" 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>

4，调用图表转换函数。

最后，在Table上调用highchartTable()函数即可，代码如下

$(document).ready(function() {
			$('table.highchart').highchartTable();
		});

这里代码中需要注意的是：

1，data-graph-container=".highchart-container2"的值是直接饮用的上面所定义class的名称：<div class="highchart-container2"></div>所以这两个名字必须一致。

2，下面调用函数时$('table.highchart').highchartTable();中的('table.highchart')直接调用的上面table的class名称。

所以记得一一对应，否则不能出效果。

如果上述步骤都没问题就应该可以看到如下效果图：

关于其它一些属性可以去官网查看。

下面给出js下载地址：

js下载地址：http://download.csdn.net/detail/gulaer/7251053

项目下载地址：http://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项目地址：http://download.csdn.net/detail/gulaer/7251195

项目中包含其它两种报表，包括3D报表。