Heguming

Heguming

0个粉丝

8

问答

0

专栏

6

资料

Heguming  发布于  2015-07-29 10:24:58
采纳率 0%
8个问答
6210

基于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:




ECharts



       
                style="height: 100%; width: 100%; border: 0px; text-align: left; align: left; valign: left;">

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

(原创,转载请注明出处)
      
我来回答
回答4个
时间排序
认可量排序

david

31个粉丝

368

问答

253

专栏

229

资料

david 2015-07-29 10:39:25
认可0
赞,这个可以精华:)

jp1017

0个粉丝

78

问答

0

专栏

9

资料

jp1017 2015-07-29 12:37:09
认可0
这个真是极好的,谢谢!!!:)

david

31个粉丝

368

问答

253

专栏

229

资料

david 2015-07-29 13:19:22
认可0
[quote][url=forum.php?mod=redirect&goto=findpost&pid=18578&ptid=8238]jp1017 发表于 2015-7-29 12:37[/url]
这个真是极好的,谢谢!!![/quote]

这个貌似正合你胃口。

jp1017

0个粉丝

78

问答

0

专栏

9

资料

jp1017 2015-07-29 13:47:13
认可0
[quote][url=forum.php?mod=redirect&goto=findpost&pid=18580&ptid=8238]david 发表于 2015-7-29 13:19[/url]
这个貌似正合你胃口。[/quote]

好多地方看不懂的,正在學習java,android實在搞不下去了,本週搞定java基本內容,再來學習。。
或将文件直接拖到这里
悬赏:
E币
网盘
* 网盘链接:
* 提取码:
悬赏:
E币

Markdown 语法

  • 加粗**内容**
  • 斜体*内容*
  • 删除线~~内容~~
  • 引用> 引用内容
  • 代码`代码`
  • 代码块```编程语言↵代码```
  • 链接[链接标题](url)
  • 无序列表- 内容
  • 有序列表1. 内容
  • 缩进内容
  • 图片![alt](url)
+ 添加网盘链接/附件

Markdown 语法

  • 加粗**内容**
  • 斜体*内容*
  • 删除线~~内容~~
  • 引用> 引用内容
  • 代码`代码`
  • 代码块```编程语言↵代码```
  • 链接[链接标题](url)
  • 无序列表- 内容
  • 有序列表1. 内容
  • 缩进内容
  • 图片![alt](url)
举报反馈

举报类型

  • 内容涉黄/赌/毒
  • 内容侵权/抄袭
  • 政治相关
  • 涉嫌广告
  • 侮辱谩骂
  • 其他

详细说明

易百纳技术社区