android折线图的应用

最新推荐文章于 2023-06-28 17:41:07 发布

豆豆啊豆豆

最新推荐文章于 2023-06-28 17:41:07 发布

阅读量1.4k

点赞数

分类专栏： Android 文章标签： android ichartjs webview html

本文链接：https://blog.csdn.net/wyj2424/article/details/48161519

版权

Android 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

最近做项目遇到一个需求，要求显示温度的折线图，在网上搜索了下，一共有三个可以实现的办法：1.自定义view实现折线图，按目前的水平很难实现，所以果断放弃了。2.使用android系统自制的框架AChartEngine，这个框架可以实现各种图，有折线图，柱状图，面积图，散点图...功能还是很强大的；缺点是样子不美观（老板又是个外贸协会）这个还是我调试过的。如图：

如果有需要详细学习的同学请看：http://blog.csdn.net/lk_blog/article/details/7645509（非常详细的介绍）

3.第三种方法就是将html利用webview把网页嵌入进去，html实现折线图还是很美观的，还有动画，可以生成的折线图的有highchart，echart，ichartjs，我用的是最后一种ichartjs的方法，具体的介绍可以看网站：http://www.ichartjs.com/ 它是支持多平台的，ios，android都支持。

好了，下面先看下效果图：

那么我们来看下代码：

先来html的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<script type="text/javascript" src="ichart-1.0.min.js"></script>
		<script type="text/javascript">
		var chart;
			$(function(){
				var data = [
				        	{
				        		name : '大棚温度',
				        		value:[2,12,14,20,28,32,34,36,33,24,14,4],
				        		color:'#1f7e92'
				        	}
				       ];
			       
				 chart = new iChart.Area2D({
						render : 'canvasDiv',
						data: data,
						turn_off_touchmove:true,
						title : {
							text:'大棚温度情况',
							height:60,
							font:'微软雅黑',
							color:'#1f7e92',
							fontsize:44
                },
						width : 1100,
						height : 600,
						//开启动画效果
						animation:true,
						area_opacity:0.15,
						sub_option:{
							smooth:true,
							label:{fontsize:25},
							point_size:14
						},
						
						subtitle:{
							text:'单位:摄氏度',//利用副标题设置单位信息
							fontsize:25,
							color:'#1f7e92',
							textAlign:'left',
						},
			 coordinate:{
					//坐标的属性
                    axis : {
                        width : [0, 0, 2, 2]
                    },
                    background_color:'#ffffff',
                    height:'90%',
                    valid_width:'94%',
                    height : 260,
                    scale2grid:false,
					//横线
                    grids:{
                        horizontal:{
                            way:'share_alike',
                            value:5
                        }
                    },
					//坐标轴的属性
                    scale:[{
                        position:'left',
                        start_scale:0,
                        end_scale:50,
                        scale_space:10,
                        label:{color:'#1f7e92',font:'微软雅黑',fontsize:25,fontweight:400},
                   
                     
                    },{
                        position:'bottom',
                        start_scale:1,
                        end_scale:12,
                        label:{color:'#1f7e92',font:'微软雅黑',fontsize:25,fontweight:400},
                   
                        labels:["0","2","4","6","8","10","12","14","16","18","20","22"]
                    }]
                }	
			});
				
				chart.draw();
			});
			
			function setContentInfo(data)  {  
				var jsonObjects = eval(data);   //通过eval方法处理得到json对象数组  
				chart.push("data",jsonObjects);
				chart.setUp();
				chart.draw();
			}  
  
		</script>
		</head>
		<body>
			<div id='canvasDiv'></div>
</body>
</html>

最关键的是要在<script type="text/javascript" src="ichart-1.0.min.js"></script>这个当中声明这个js，现在已经是1.2了，我还是用的之前的版本。

下面来看下xml的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical" >

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_gravity="center"
            android:layout_marginLeft="20dp"
            android:onClick="backBtn"
            android:text="返回" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_gravity="center"
            android:layout_marginRight="20dp"
            android:onClick="updateBtn"
            android:text="更新数据" />
    </RelativeLayout>

    <WebView
        android:id="@+id/wv"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

很简单的布局，最后来看下java的代码块：

package com.example.ichartjs;

import java.util.Random;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.View;
import android.view.Window;
import android.webkit.WebView;

import com.example.mychartlinedemo.R;

public class chartjs extends Activity {

	private WebView wv;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		// TODO Auto-generated method stub
		super.onCreate(savedInstanceState);
		this.requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题栏
		setContentView(R.layout.chartjs);

		wv = (WebView) findViewById(R.id.wv);
		wv.getSettings().setJavaScriptEnabled(true);
		wv.getSettings().setUseWideViewPort(true);
		wv.getSettings().setSupportZoom(true);
		// 设置是否可缩放
		wv.getSettings().setBuiltInZoomControls(true);
		wv.getSettings().setLoadWithOverviewMode(true);
		wv.requestFocus();
		wv.loadUrl("file:///android_asset/mianji_chart.html");
	}

	public void backBtn(View view) {
		finish();
	}

	// 模拟获取远程数据 这里模拟从服务端获取数据
	private String getRemoteData() {
		try {
			JSONObject object1 = new JSONObject();
			object1.put("name", "大棚温度");
			object1.put("color", "#1f7e92");
			Random random = new Random();
			// js中的数组类型要使用JSONArray对象
			JSONArray jadata = new JSONArray();
			for (int i = 0; i < 12; i++) {
				jadata.put(random.nextInt(45));
			}
			object1.put("value", jadata);
			JSONArray jsonArray = new JSONArray();
			jsonArray.put(object1);
			return jsonArray.toString();
		} catch (JSONException e) {
			e.printStackTrace();
		}
		return null;
	}

	public void updateBtn(View view) {

		wv.loadUrl("javascript:setContentInfo('" + getRemoteData() + "')");
	}

	// 设置回退
	// 覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if ((keyCode == KeyEvent.KEYCODE_BACK) && wv.canGoBack()) {
			wv.goBack(); // goBack()表示返回WebView的上一页面
			return true;
		}
		return false;
	}

}

最后附上代码：

csdn：http://download.csdn.net/detail/wyj2424/9071365

有什么问题可在下面留言，大家共同学习。

豆豆啊豆豆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
android折线图的应用

最近做项目遇到一个需求，要求显示温度的折线图，在网上搜索了下，一共有三个可以实现的办法：1.自定义view实现折线图，按目前的水平很难实现，所以果断放弃了。2.使用android系统自制的框架AChartEngine，这个框架可以实现各种图，有折线图，柱状图，面积图，散点图...功能还是很强大的；缺点是样子不美观（老板又是个外贸协会）这个还是我调试过的。如图：如果有需要详细学习的同学请看：ht
复制链接

扫一扫