Android上，使用FusionCharts进行图表控件封装

最新推荐文章于 2018-02-23 10:09:47 发布

drlyee

最新推荐文章于 2018-02-23 10:09:47 发布

阅读量1.5k

点赞数

分类专栏： Android 技术

本文链接：https://blog.csdn.net/drlyee/article/details/25240407

版权

Android 技术专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先看一下效果图，效果图是在Android上呈现的FusionCharts报表：

很酷吧，做好底层工作，加载这样一张报表只需要三行代码。

首先要熟悉FusionCharts的报表相关知识，本文只讲述如何在Android程序中呈现，具体FusionCharts的数据格式请见官方的API：http://docs.fusioncharts.com/charts/

下边介绍如何在Android上呈现FusionCharts：

1. 引用Charts包到工程中

2. 建立ChartWeb.html到asset中， ChartWeb.html主要作用是加载和显示FusionCharts控件，代码如下，注释说明：

<html>
<head>
    <title></title>
    <script type="text/javascript" src="Charts/FusionCharts.js"></script>
    <script type="text/javascript" src="Charts/jquery.min.js"></script>
    <script type="text/javascript" src="Charts/FusionCharts.jqueryplugin.js"></script>
</head>
<body>
    <div id="chartContainer" style="width: 100%; height: 100%">
        FusionCharts XT will load here!</div>
  <script type="text/javascript">
           
            // 调用后台方法 获得图表名称 (ChartWebView->getChartName)
            var ChartName = window.init.getChartName();
            
            // 调用后台方法 获得图表数据 (ChartWebView->getXmlData)
            var xmlData = window.init.getXmlData();
            
            // 获取网页高度，宽度
            var iWidth = document.body.scrollWidth - 20;
            var iHeight = document.body.scrollHeight - 20;
            
            // 建立图表，加载显示图表
            var myChart = new FusionCharts(ChartName, "myChartId", iWidth, iHeight);
            myChart.setXMLData(xmlData);
            myChart.render("chartContainer");
            
            // 定义加载完成的事件
            myChart.addEventListener("DrawComplete", function (evt, args) {
               
                // 调用后台方法 (ChartWebView->loaded)
                window.init.loaded();
            });
    </script>
</body>
</html>

3. 重写WebView，定义ChartWebView继承WebView，自定义控件ChartWebView，自定义控件封装了加载ChartWeb.html和加载FusionCharts的方法，代码说明：

import android.annotation.SuppressLint;
import android.app.ProgressDialog;
import android.content.Context;
import android.util.AttributeSet;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast;

/**
 * 图表控件
 * @author drlyee
 */
public class ChartWebView extends WebView
{
	private Context context; // 上下文
	private ProgressDialog progressDialog; // 加载框
	private String ChartName; // 图表名称
	private String XmlData; // 图表数据

	/**
	 * 构造函数
	 * @author drlyee
	 */
	public ChartWebView(Context context)
	{
		super(context);
		this.context = context;
	}

	/**
	 * 构造函数
	 * @author drlyee
	 */
	public ChartWebView(Context context, AttributeSet attrs)
	{
		super(context, attrs);
		this.context = context;
	}

	/**
	 * 构造函数
	 * @param drlyee
	 */
	public ChartWebView(Context context, AttributeSet attrs, int defStyle)
	{
		super(context, attrs, defStyle);
		this.context = context;
	}

	/**
	 * 初始化控件
	 * @author drlyee
	 */
	@SuppressLint("SetJavaScriptEnabled")
	private void initChart()
	{
		WebSettings webSettings = getSettings();
		webSettings.setJavaScriptEnabled(true);
		webSettings.setSupportZoom(true);
		webSettings.setBuiltInZoomControls(true);
		clearCache(true);
	}

	/**
	 * 加载控件
	 * @param chartName
	 * @param chartData
	 * @author drlyee
	 */
	public void setChartData(String chartName, String chartData)
	{
		ChartName = chartName;
		XmlData = chartData;
		// WebView
		initChart();
		// 加载ChartWeb.html
		loadUrl("file:///android_asset/ChartWeb.html");
		addJavascriptInterface(this, "init");
		progressDialog = ProgressDialog.show(context, "请稍等", "正在加载数据......", true, false);
	}

	/**
	 * 加载成功后调用 此为JavaScript回调函数，请勿在Java中调用
	 * @author drlyee
	 */
	public void loaded()
	{
		progressDialog.dismiss();
		Toast.makeText(context, "加载成功", Toast.LENGTH_LONG).show();
	}

	/**
	 * 为前台设置图表名称 此为JavaScript回调函数，请勿在Java中调用
	 * @author drlyee
	 */
	public String getChartName()
	{
		return ChartName;
	}

	/**
	 * 为前台设置图表数据 此为JavaScript回调函数，请勿在Java中调用
	 * @author drlyee
	 */
	public String getXmlData()
	{
		return XmlData;
	}
}

好了，到这里准备工作都做完了，现在看如果使用，使用非常简单，就三行代码：

1. 将自定义的ChartWebView，拖入lauout中：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >


   <com.drlyee.chart.operator.ChartWebView
        android:id="@+id/chartOperator1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</LinearLayout>

2.定义图表名称和图表数据，此块内容参见FusionCharts官方API ：

http://docs.fusioncharts.com/charts/

3.加载ChartWebView控件并赋值显示，三行代码完成图表加载，方便！

	private ChartWebView chartOperator; // 第一行

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		chartOperator = (ChartWebView) findViewById(R.id.chartOperator1);// 第二行
		chartOperator.setChartData(chart1Name, chart1Data);// 第三行
		// chartOperator.setChartData(chart2Name, chart2Data);
		// chartOperator.setChartData(chart3Name, chart3Data);
	}

已经将示例程序打好包，可下载：

FusionChartsForAndroid.rar

做好底层工作，就可以无限制的减少代码行数。