Android 报表工具FusionCharts解析

最新推荐文章于 2021-05-27 15:07:20 发布
最新推荐文章于 2021-05-27 15:07:20 发布
阅读量1k 收藏
点赞数
分类专栏： Android-总结 文章标签： android fusioncharts 报表 xml
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lovoo/article/details/51321541
版权

一、使用了json与xml来加载数据
解析json使用jackson-all-1.9.2.jar
1)利用XML提供的静态数据来作为数据源

<?xml version="1.0" encoding="UTF-8"?>
<chart yAxisName="Amount" caption="Person(1XML)" numberPrefix="$" useRoundEdges="1" bgColor="FFFFFF,FFFFFF" 
       showBorder="1" showValues="0" baseFontSize="12">
        <set label="Monday" value="25000"  /> 
        <set label="Tuesday" value="35000" /> 
        <set label="Wednesday" value="42300" /> 
        <set label="Thursday" value="35300" /> 
        <set label="Friday" value="51300" />
        <set label="Saturday" value="64500" />
        <set label="Sunday" value="88900" />

</chart>

2)利用JSON提供的静态数据来作为数据源

{
  "chart": {
    "yAxisname": "Amount",
    "caption": "Person(2JSON)",
    "numberPrefix": "$",
    "useRoundedges": "1",
    "bgColor": "FFFFFF,FFFFFF",
    "showBorder": "1",
    "showValues":"0",
    "baseFontSize":"12"
  },
  "data": [
    {
      "label": "Monday",
      "value": "25000"
    },
    {
      "label": "Tuesday",
      "value": "35000"
    },
    {
      "label": "Wednesday",
      "value": "42300"
    },
    {
      "label": "Thursday",
      "value": "35300"
    },
    {
      "label": "Friday",
      "value": "31300"
    },
    {
      "label": "Saturday",
      "value": "64500"
    },
    {
      "label": "Sunday",
      "value": "88900"
    }
  ]
}

3)利用XML拼接字符串提供的静态数据来作为数据源

var strXML = '<chart yAxisName="Amount" caption="Person(3XML)" numberPrefix="$" useRoundEdges="1" bgColor="FFFFFF,FFFFFF"'+ 
           'showBorder="1" showValues="0" baseFontSize="12">'+
          '<set label="Monday" value="25000"  />'+ 
          '<set label="Tuesday" value="35000" />'+ 
          '<set label="Wednesday" value="42300" />'+ 
          '<set label="Thursday" value="35300" />'+ 
          '<set label="Friday" value="51300" />'+
          '<set label="Saturday" value="64500" />'+
          '<set label="Sunday" value="88900" />'+
        '</chart>';

4)利用JSON拼接字符串提供的静态数据来作为数据源

var strJSON = '{"chart": {'+
                    '"yAxisname": "Amount",'+
                    '"caption": "Person(4JSON)",'+
                    '"numberPrefix": "$",'+
                    '"useRoundedges": "1",'+
                    '"bgColor": "FFFFFF,FFFFFF",'+
                    '"showBorder": "1",'+
                    '"showValues":"0",'+
                    '"baseFontSize":"12"'+
                  '},'+
                  '"data": ['+
                    '{"label": "Monday",'+
                      '"value": "25000"'+
                    '},'+
                    '{'+
                      '"label": "Tuesday",'+
                      '"value": "35000"'+
                    '},'+
                    '{'+
                      '"label": "Wednesday",'+
                      '"value": "42300"'+
                    '},'+
                    '{'+
                      '"label": "Thursday",'+
                      '"value": "35300"'+
                    '},'+
                    '{'+
                      '"label": "Friday",'+
                      '"value": "31300"'+
                    '},'+
                    '{'+
                      '"label": "Saturday",'+
                      '"value": "64500"'+
                    '},'+
                    '{'+
                      '"label": "Sunday",'+
                      '"value": "88900"'+
                    '}'+
                 ']'+
                '}';

二、示例图
这里写图片描述
这里写图片描述
这里写图片描述
三、代码解析
1)列表界面

public class HomeActivity extends ListActivity {
    public static final String CHART_SIGN = "sign";
    // 图名称
    private String[] mChartsName;
    // 图标记
    private String[] mChartsSign;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        initDatas();
        setAdapter();
    }

    private void setAdapter() {
        setListAdapter(new SimpleAdapter(this, getDatas(), android.R.layout.simple_list_item_1, new String[]{"name"}, new int[]{android.R.id.text1}));
    }

    private List<Map<String, String>> getDatas(){
        List<Map<String, String>> list = new ArrayList<Map<String,String>>();
        for (int i = 0; i < mChartsName.length; i++) {
            Map<String, String> map = new HashMap<String, String>();
            map.put("name", mChartsName[i]);
            list.add(map);
        }
        return list;
    }

    private void initDatas() {
        mChartsName = new String[] { "折线图", "面积图", "2D柱状图", "3D柱状图", "2D饼图", "3D饼图", "多重数据堆积图", "组合图", "不同单位的多数据集组合图", "散点图", "气泡图",
                "网格图表", "中国地图" };
        mChartsSign = new String[] { "Line", "Area2D", "Column2D", "Column3D", "Pie2D", "Pie3D", "StackedColumn3D", "MSCombi2D",
                "MSColumn3DLineDY", "Scatter", "Bubble", "SSGrid", "FCMap_China2" };
    }

    @Override
    protected void onListItemClick(ListView l, View v, int position, long id) {
        if (AdobeUtil.checkAdaboe(this)) {
            //进行跳转
            Intent intent = new Intent(HomeActivity.this, ChartsShowActivity.class);
            intent.putExtra(CHART_SIGN, mChartsSign[position]);
            startActivity(intent);  
            //finish();  
        }else {
            AdobeUtil.installAdobe(this);
        }
        super.onListItemClick(l, v, position, id);
    }


}

2)显示界面：

/**
 * 图表显示
 * 
 * @Project App_FusionCharts
 * @Package com.drlyee.chart
 * @author chenlin
 * @version 1.0
 * @Date 2014年5月5日
 * @Note TODO
 */
public class ChartsShowActivity extends Activity {
    private static final String TAG = "tag";
    private WebView mWebView;
    private String mFlashType;
    private String mChartData;
    private String mJsonString;

    private String mSign;

    private ChartsDataEntity mDatasEntity;
    private List<DataSetEntity> mDatas;
    private WebSettings mSettings;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_show_charts);
        mSign = getIntent().getStringExtra(HomeActivity.CHART_SIGN);
        Log.i(TAG, "mSign == " + mSign);
        init();
        initJson();
        loadCharts();
    }

    private void initJson() {
        // 定义Json格式的数据
        mJsonString = "{\"chart\":{\"caption\":\"2014季度销售报表汇总\", \"subcaption\":\"2014季度\", "
                + "\"xaxisname\":\"销售月份\", \"yaxisname\":\"销售额度\", \"numberprefix\":\"$\"},"
                + " \"data\":[{ \"label\":\"一月\",\"value\":\"17400\"}, { \"label\":\"二月\",\"value\":\"19800\" },"
                + "{ \"label\":\"三月\",\"value\":\"21800\"}, { \"label\":\"四月\",\"value\":\"23800\" },"
                + "{\"label\":\"五月\",\"value\":\"29600\"}, { \"label\":\"六月\",\"value\":\"27600\" },"
                + " {\"label\":\"七月\",\"value\":\"31800\"}, {\"label\":\"八月\",\"value\":\"39700\"},"
                + "{\"label\":\"九月\",\"value\":\"37800\"}, {\"label\":\"十月\",\"value\":\"21900\"},"
                + "{\"label\":\"十一月\",\"value\":\"32900\" }, {\"label\":\"十二月\",\"value\":\"39800\"}]}";
    }

    /**
     * 加载显示图表
     */
    private void loadCharts() {
        if (mSign.endsWith("Line")) {
            mFlashType = "swf/Line.swf";
            mChartData = "data/sale_data.xml";
        } else if (mSign.endsWith("Area2D")) {
            // 以Json格式传图表数据
            mFlashType = "swf/Area2D.swf";
            mChartData = getJsonData();
            mWebView.loadDataWithBaseURL("file:///android_asset/", getStringForHtmlByJson(mFlashType, mChartData), "text/html", "utf-8",
                    null);
            return;
        } else if (mSign.equals("Column2D")) {
            mFlashType = "swf/Column2D.swf";
            mChartData = "data/Column2DData.xml";
        } else if (mSign.equals("Column3D")) {
            // 以Json格式传图表数据
            mFlashType = "swf/Column3D.swf";
            mChartData = mJsonString;
            mWebView.loadDataWithBaseURL("file:///android_asset/", getStringForHtmlByJson(mFlashType, mChartData), "text/html", "utf-8",
                    null);
            return;

        } else if (mSign.equals("Pie2D")) {
            mFlashType = "swf/Pie2D.swf";
            mChartData = "data/sale_data.xml";
        } else if (mSign.equals("Pie3D")) {
            mFlashType = "swf/Pie3D.swf";
            mChartData = "data/sale_data.xml";
        } else if (mSign.equals("StackedColumn3D")) {
            mFlashType = "swf/StackedColumn3D.swf";
            mChartData = "data/sale_data_StackedColumn3D.xml";
        } else if (mSign.equals("MSCombi2D")) {
            mFlashType = "swf/MSCombi2D.swf";
            mChartData = "data/sale_data_MSCombi2D.xml";
        } else if (mSign.equals("MSColumn3DLineDY")) {
            mFlashType = "swf/MSColumn3DLineDY.swf";
            mChartData = "data/sale_data_MSColumn3DLineDY.xml";
        } else if (mSign.equals("Scatter")) {
            mFlashType = "swf/Scatter.swf";
            mChartData = "data/ScatterData.xml";
        } else if (mSign.equals("Bubble")) {
            mFlashType = "swf/Bubble.swf";
            mChartData = "data/BubbleData.xml";
        } else if (mSign.equals("SSGrid")) {
            mFlashType = "swf/SSGrid.swf";
            mChartData = "data/sale_data.xml";
        } else if (mSign.equals("FCMap_China2")) {
            mFlashType = "swf/FCMap_China2.swf";
            mChartData = "data/MapData.xml";
        }
        /*
         * 由于FusionCharts.js和flash资源均在资源目录asset下，所以第一个参数需要添加该路径。 否则资源将无法加载显示
         */
        mWebView.loadDataWithBaseURL("file:///android_asset/", getStringForHtml(mFlashType, mChartData), "text/html", "utf-8", null);
    }

    /**
     * 传递Json格式数据，作为报表显示数据。实现后台获取动态数据在报表中显示。
     * 
     * @param flashType
     *            报表组件类型
     * @param chartData
     *            报表显示数据
     * @return 拼接的html文件代码
     */
    private String getStringForHtmlByJson(String flashType, String chartData) {
        String data = "<html>" + "<head>" + "<title>报表图形</title>"
                + "<script type=\"text/javascript\" src=\"js/FusionCharts.js\"></script>" + "</head>" + "<body>"
                + "<div id=\"chartContainer\">FusionCharts 将要加载在此!</div>" + "<script type=\"text/javascript\">"
                + "var myChart = new FusionCharts( '" + flashType + "',\"myChartId\", \"300\",\"400\", \"0\", \"1\" );"
                + "myChart.setJSONData('" + chartData + "');" + "myChart.render(\"chartContainer\");" + "</script>" + "</body>" + "</html>";
        return data;
    }

    /**
     * 报表数据静态定义在XML文件中，载入组件中显示。
     * 
     * @param flashType
     *            报表组件类型
     * @param chartData
     *            xml文件路径
     * @return 拼接的html文件代码
     */
    private String getStringForHtml(String flashType, String chartData) {
        String data = "<html>" + "<head>" + "<title>报表图形</title>"
                + "<script type=\"text/javascript\" src=\"js/FusionCharts.js\"></script>" + "</head>" + "<body>"
                + "<div id=\"chartContainer\">FusionCharts 将要加载在此!</div>" + "<script type=\"text/javascript\">"
                + "var myChart = new FusionCharts( '" + flashType + "',\"myChartId\", \"300\",\"400\", \"0\", \"1\" );"
                + "myChart.setXMLUrl('" + chartData + "');" + "myChart.render(\"chartContainer\");" + "</script>" + "</body>" + "</html>";
        return data;
    }

    private String getJsonData() {
        mDatasEntity = new ChartsDataEntity();
        mDatas = new ArrayList<DataSetEntity>();

        // ChartsEntity对象定义了图表属性
        ChartsEntity chart = new ChartsEntity();
        chart.setCaption("2014季度销售报表汇总");
        chart.setSubcaption("2014季度");
        chart.setXaxisname("销售月份");
        chart.setYaxisname("销售额度");
        chart.setNumberprefix("$");
        mDatasEntity.setChart(chart);

        initDataSet("一月", "17400");
        initDataSet("二月", "19800");
        initDataSet("三月", "21800");
        initDataSet("四月", "23800");
        initDataSet("五月", "29600");
        initDataSet("六月", "27600");
        initDataSet("七月", "31800");
        initDataSet("八月", "39700");
        initDataSet("九月", "37800");
        initDataSet("十月", "21900");
        initDataSet("十一月", "32900");
        initDataSet("十二月", "39800");
        initDataSet("一月", "17400");

        try {
            ObjectMapper objectMapper = new ObjectMapper();
            StringWriter sw = new StringWriter();
            JsonGenerator generator = objectMapper.getJsonFactory().createJsonGenerator(sw);
            generator.writeObject(mDatasEntity);
            generator.close();
            String json = sw.toString();
            Log.i(TAG, "json == " + json);
            return json;
        } catch (IOException e) {
            e.printStackTrace();
        }

        return null;
    }

    private void initDataSet(String month, String num) {
        // DataSetEntity对象定义了图表的一组数据
        // 1.创建数据
        DataSetEntity data = new DataSetEntity();
        data.setLabel(month);
        data.setValue(num);
        // 2.添加到数据集合
        mDatas.add(data);
        // 3.设置到实体类
        mDatasEntity.setDatas(mDatas);

    }

    private void init() {
        mWebView = (WebView) findViewById(R.id.webview);
        mWebView.setHorizontalScrollbarOverlay(true);
        mWebView.setVerticalScrollbarOverlay(true);

        mSettings = mWebView.getSettings();
        // 设置支持javascript
        mSettings.setJavaScriptEnabled(true);
        // 支持插件
        mSettings.setPluginState(WebSettings.PluginState.ON);
        // 设置是否支持缩放(手指伸缩操作)
        mSettings.setBuiltInZoomControls(true);
        // 设置是否显示网络图像
        mSettings.setBlockNetworkImage(true);
        // 设置是否启用或禁止WebView访问文件数据
        mSettings.setAllowFileAccess(true);
        // 设置默认文本编码格式
        mSettings.setDefaultTextEncodingName("UTF-8");
        // mWebView.loadUrl("file:///android_asset/ChartWeb.html");
    }
}

3)工具类

public class AdobeUtil {

    /**
     * 安装flash插件
     */
    public static void installAdobe(final Context context) {
        new AlertDialog.Builder(context).setTitle("安装flash插件").setPositiveButton("确定", new OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Intent intent = new Intent("android.intent.action.VIEW");
                intent.setData(Uri.parse("market://details?id=com.adobe.flashplayer"));
                context.startActivity(intent);
                ((Activity)context).finish();
            }
        }).setNegativeButton("取消", new OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
            }
        }).show();
    }

    /**
     * 是否安装了flash插件
     * 
     * @return
     */
    public static boolean checkAdaboe(Context context) {
        PackageManager pm = context.getPackageManager();
        List<PackageInfo> packages = pm.getInstalledPackages(PackageManager.GET_SERVICES);
        for (PackageInfo pi : packages) {
            if ("com.adobe.flashplayer".equals(pi.packageName)) {
                return true;
            }
        }
        return false;
    }
}

四、代码下载
链接：http://pan.baidu.com/s/1mhKFF5m 密码：blol

lovoo
关注
专栏目录
Android报表大全
01-12
Android原生报表,属于自定义控件,需要什么自己优化即可,饼图,柱状图,折线图,雷达图,EChart有的咱都有,Eclipse环境,AndroidStudio自己集成.
android 报表（用rchart做报表）
03-07
android的图形报表项目，包括了2D，3D等饼状，柱状，雷达，曲线等图形报表demo，下载解压后即可导入到eclipse中。有问题可以留言。
【Android】报表、线图、饼图、柱状图 (工具整理)
tibaloga
11-02 121
1.achartengine（http://code.google.com/p/achartengine/） android 2. android-ski-report（http://code.google.com/p/android-ski-report/） 这个项目在Google Market也可以下载到。 3. charts4j(http://code.googl...
FusionCharts报表在Android上的实现
stevenhu_223的专栏
07-18 7148
最近Android这边报表方面的实现一直在考虑是否需要谷歌提供的第三方库achartengine来实现，但考虑到和IOS的一致问题
安卓图表报表相关-Android种类比较齐全的图表库.rar
07-29
Android种类比较齐全的图表库.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
FusionCharts报表工具及例子
04-25
通过以上介绍，我们可以看到FusionCharts是一个全面的报表工具，无论你是数据分析师、前端开发者还是项目经理，都能从中受益。结合压缩包中的示例，你将能够更好地理解和应用FusionCharts，为你的项目增添生动且富有...
FusionCharts_Evaluation报表工具
06-25
综上所述，"FusionCharts_Evaluation"是一个全面了解和评估FusionCharts报表工具的资源包，涵盖了从基本使用到高级特性的各种内容，对于想要提升数据可视化效果的开发者或分析师来说，这是一个非常有价值的工具。...
免费漂亮的Flash图形报表-FusionCharts Free V2.1
08-12
FusionCharts Free V2.1是一款专为网页开发者设计的免费Flash图形报表工具，它能够帮助用户轻松创建出美观、互动且数据丰富的图表。这款软件以其出色的数据可视化能力，为网站和应用程序添加了动态和直观的展示效果...
Android显示报表-HighcharsTable
04-25
Android显示报表-HighcharsTable 说明地址：http://blog.csdn.net/gulaer/article/details/24469015
android报表制作
08-24
用于在android上开发报表，这个一个做的比较好的第三方源码，里面有例子
FusionCharts在Android上的实现
07-18
FusionCharts各种主流报表在Android上的实现。
Android应用源码之Android多维报表.rar
12-16
Android应用源码之Android多维报表.rar
android 绘制各种图表的开源引擎achartengine 7.0
03-16
achartengine-0[1].7.0-demo-source.zip android开发股表图表，统计图表的开源引擎，demo及jar包
android图形报表demo源码(AChartEngine)
09-05
android用AChartEngine写的图形报表demo源码，导入即可运行，博客文章地址：http://www.wuhongge.cn/android-achartengine-demo/
ichartjs android,Android报表解决方案 使用开源组件iChartjs（一）
weixin_39595164的博客
05-27 190
随着移动设备的日益增多，以前互联网的一些常用功能逐渐在移动互联网上逐渐迁移 今天我们看一下我们经常用到的报表是怎样实现在android客户端的接触过android图标的人应该都知道Achartengine 一个android应用的图表库 利用android本地的API来进行图标的绘制适用于数据分析，报表显示，也涵盖了一些常用的图标，是个易学易用的图表库，但是他的实现的效果有局限性，交互性不强可...
android 报表
qq524784740的专栏
12-03 435
wait..
【叨、校长】Android报表工具AChartEngine初探总结
叨、校长灬
05-01 158
AChartEngine 是一个安卓系统上制作图表的框架,目前它支持如下的图表类型:•line chart (折线图) •area chart (面积图；分区图，对比图)•scatter chart ( 散点图)•time chart (时间图；进度表)•bar chart (条形图;柱状图)•pie chart ( 饼图)•bubble chart (气泡图) •doughnut cha...
Android上，使用FusionCharts进行图表控件封装
05-07 1549
先看一张图片：
Fusioncharts：动态报表工具，展示强大图表与数据交互
Fusioncharts报表工具是一款强大的基于Flash的数据驱动图表组件，它能够为网页应用提供动态、交互式的图表解决方案。该工具的核心特点包括以下几个方面： 1. **Fusioncharts简介**： Fusioncharts利用Flash技术，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lovoo

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值