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

 Highcharts 报表是至今我发现做得最好的报表之一。当然,可能还有更好的我没发现。

此次我们就说说怎么让Highcharts显示在Android设备上。

首先可以在官网查看文档[官方文档]此次我们以HighchartsTable为例,因为HighchartsTable相对来说使用较为简单,只需要引用几个js,和写一些html代码即可。

首先我们可以看到文档下面有说明:

1,首先需要下载并引用必须的js文件,引用方法。

	
	
	

2,创建图表渲染容器(div)。


3,创建HTML表格代码。

,你必须设置一些属性,如图表类型和图表渲染容器等
其中数据列(Series)的名字在中定义,值在中定义
的第一个
代表X轴(xAxis)的值,其他代表每个系列的Y值(Value),示例代码如下:

Column example
Month Sales Benefits
January 8000 2000
February 12000 3000
March 18000 4000
April 2000 -1000
May 500 -2500


4,调用图表转换函数。

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

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

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

1,data-graph-container=".highchart-container2"的值是直接饮用的上面所定义class的名称:

所以这两个名字必须一致。

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

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


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

【Android-数据报表】初级篇[让Highcharts报表显示在Android屏幕]_第1张图片

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

下面给出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-数据报表】初级篇[让Highcharts报表显示在Android屏幕]_第2张图片


Android项目地址:http://download.csdn.net/detail/gulaer/7251195


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


你可能感兴趣的:(Android中级篇)