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