【Android-数据报表】初级篇[让Highcharts报表显示在Android屏幕]

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Gulaer/article/details/24469015

 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报表。


展开阅读全文

没有更多推荐了,返回首页