基于Echarts图表库的Android平台图表实现

本帖最后由 Heguming 于 2015-7-29 16:29 编辑

    最近,一直在研究Android平台下的图表绘制,经过查证,主要通过一下三种方式:
         1.通过画布工具Cavas一步步画出,此种方式较为繁琐,不建议使用
         2.通过Android自带的报表库AchartEngine,此种方式实现相对简单,但绘制风格极为丑陋,难登大雅之堂
         3.通过第三方图表库,例如HighCharts、Echarts等,此处选择Echarts
   好了,接下来,就开始了正式的学习.其实,Echarts还是极易入手的,它的主要工作就是JavaScript的编写
   那么,先上图(这是最简单的折现统计图Sample,但基本功能均已实现):

   当然,统计数据是可以动态更新的(数据增加主要通过调用Java脚本中的方法实现)
   然而,在学习过程中,确实遇到了几个说大不大,说小也不小的问题:
   1.toolbox栏工具有些在Android平台不显示,在Windows下却显示
      具体包括:
      可以显示:dataZoom（数据缩放,主要功能是放大局部图表）、magicType（动态类型切换,主要功能是动态切换图表类型:折线图、柱状图、散点图......）、restore（图表还原,主要功能是刷新图表）
      不可显示:mark（辅助线标志,主要功能是添加辅助线）、dataView（数据视图,主要功能是浏览具体数据）、saveAsImage（保存图片,这个不用讲了吧）
      后来,经过多次研究,发现原来是版本原因,当然,解决方法就很简单了,换成最新版本,OK!
      但新问题又来了,除了dataView外,其余旧版本不能显示的,在新版本中尽管可以显示,但却不能使用,估计是Android平台不支持的原因
   2.Java脚本编写完成后,发现图表不显示
      此时,多是语法出的问题
      由于是通过JavaScript编写的Eclipse是不会自动校验语法对错的,因而只能通过具体效果判断
      不过,倒有一个简单的方法可以直接校验语法的正误
      大家都知道Eclipse下可以通过"Ctrl"+"Shift"+"F"进行数据格式化.因而,我们可以通过这几个快捷键组合,方便的检查语法的正确性.如果语法有问题,"Ctrl"+"Shift"+"F"是不起作用的.
  3.关于横纵坐标轴的类型type
      官方的例程中,横轴默认为类目型'category'（类目类型），纵轴默认为数值型'value'（值类型）
      经过多次验证,发现类型的选取多与数学中的函数定义有密切关系
      一般情况下,直角坐标系下,每个x只对应一个y,这是函数.相反地,如果一个x对应多个y，但每个y只对应一个x,这称之为映射
      研究发现,一旦取类型为"category",那么他所对应的"value"一定唯一.因而，可通过类型的选取进行x、y轴关系的互换
      但也暴露了Echarts的一个问题,即不能绘制出一条相交的曲线（此时,同一x对应多个y,同一y也对应多个x）,当然,还是有解决方法的,以后会具体提及
  4.大家有没有注意到,图中的两条曲线并不是完全平滑连续的,其间总有小小的空心圆圈
       这是因为,我所选取的x轴类型为"category".当选用此类型时,就会出现图中的小小的空心圆圈
       所以,如果想让曲线完全平滑连续,可以将x、y的类型全部取为"value"即可
       后经查证,发现除此之外,还可通过symbolSize设置标志图形的大小,完美解决

   好了,打了很多,希望鄙人小小的经验对大家有帮助,后面会持续更新
   最后,奉上测试代码:
  
[code] MainActivity:

  package com.hzbst.echartst;

import java.util.Timer;
import java.util.TimerTask;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;

public class MainActivity extends Activity implements OnClickListener {
        private Button createchart_bt;
        private Button addchart_bt;
        private Button clearchart_bt;
        private WebView chartshow_wb;
        private int index = 0;
        private boolean isThread = false;
        Timer timer = null;
        final String[] WEEK = { "周一", "周二", "周三", "周四", "周五", "周六", "周日" }; // category
        // final String[] WEEK = { "1", "2", "3", "4", "5", "6", "7" }; // value
        private Handler handler = new Handler() {
                @Override
                public void handleMessage(Message msg) {
                        // TODO Auto-generated method stub
                        super.handleMessage(msg);
                        int max = (int) (Math.random() * 10);
                        int min = (int) (Math.random() * 5) - 5;
                        chartshow_wb.loadUrl("javascript:add(" + max + ", " + min + ", '"
                                        + WEEK[index++] + "');");
                        if (index == 7) {
                                index = 0;
                        }
                }
        };

        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                initView();
        }

        /**
         * 初始化页面元素
         */
        private void initView() {
                createchart_bt = (Button) findViewById(R.id.createchart_bt);
                addchart_bt = (Button) findViewById(R.id.addchart_bt);
                clearchart_bt = (Button) findViewById(R.id.clearchart_bt);
                createchart_bt.setOnClickListener(this);
                addchart_bt.setOnClickListener(this);
                clearchart_bt.setOnClickListener(this);
                addchart_bt.setText("开启动态更新");
                chartshow_wb = (WebView) findViewById(R.id.chartshow_wb);
                // 进行webwiev的一堆设置
                // 开启本地文件读取（默认为true，不设置也可以）
                chartshow_wb.getSettings().setAllowFileAccess(true);
                // 开启脚本支持
                chartshow_wb.getSettings().setJavaScriptEnabled(true);
                chartshow_wb.loadUrl("file:///android_asset/echart/myechart.html");
        }

        @Override
        public void onClick(View v) {
                TimerTask task = new TimerTask() {
                        public void run() {
                                handler.sendEmptyMessage(0);
                        }
                };
                switch (v.getId()) {
                case R.id.createchart_bt:
                        index = 0;
                        chartshow_wb.loadUrl("file:///android_asset/echart/myechart.html");
                        break;
                case R.id.addchart_bt:
                        if (isThread == false) {
                                timer = new Timer();
                                timer.schedule(task, 200, 200); // 延时200ms后执行，200ms执行一次
                                isThread = true;
                                addchart_bt.setText("关闭动态更新");
                        } else if (isThread == true) {
                                timer.cancel();
                                isThread = false;
                                addchart_bt.setText("开启动态更新");
                        }
                        break;
                case R.id.clearchart_bt:
                        index = 0;
                        chartshow_wb.loadUrl("javascript:clearAll();");
                        break;
                default:
                        break;
                }
        }

}

activity_main:
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.hzbst.echartst.MainActivity" >

            android:id="@+id/bt_ly"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal" >

                     android:id="@+id/createchart_bt"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/create" />

                     android:id="@+id/addchart_bt"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" />

                     android:id="@+id/clearchart_bt"
            style="?android:attr/buttonStyleSmall"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/clear" />
   

            android:id="@+id/chartshow_wb"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/bt_ly" />



关键点来了:)

myechart:








       
       
       
       
[/code]
     
祝大家玩的开心 :D

（原创,转载请注明出处）