android 自定义折线图

看图:

比较简陋,主要是通过canvas画上去的:

package com.example.democurvegraph.view;

import java.util.ArrayList;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup.LayoutParams;

/**
 * 自定义局部折线图
 * @author feijian
 * @time 2015年6月29日15:37:41
 */
public class CurveView extends View{

    ArrayList<Float> listData;
    int mHeight,mWidth;
    private int default_circle_radius = 4;
    private int selected_circle_radius = 8;
    private int padding = 8;
    private int widthEMS = 0;  //两个相邻描点之间的距离
//    private float avg = 0;// listData里面数组的平均值
    private float maxValue = 0;//最大的值
    private int lineColor=0; //线条的颜色
    private int circleColor=0; //圆圈的颜色
    private float pre_X = 0,pre_Y = 0;
    public CurveView(Context context) {
        super(context);
    }

    public CurveView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    public CurveView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
    /**
     * 自定义初始化画图数据
     * @param listData
     * @param lineColor
     * @param circleColor
     */
    public void DrawData(ArrayList<Float> listData,int lineColor,int circleColor)
    {
        this.listData = listData;
        LayoutParams llparam = this.getLayoutParams();
        mHeight = llparam.height;
        mWidth = llparam.width;
        if(listData!=null)
        {
            for(int i=0;i<listData.size();i++)
            {
                if(this.maxValue < listData.get(i))
                {
                    this.maxValue = listData.get(i);
                }
            }
        }
        this.lineColor = lineColor;
        this.circleColor = circleColor;

        this.widthEMS = (mWidth-padding*2)/listData.size();
        System.out.print("widthEMS="+widthEMS+";mWidth="+mWidth+";paddingLeft="+padding+";size="
                +listData.size()+";mHeight="+mHeight);
        invalidate();//刷新界面
    }
    @Override
    protected void onDraw(Canvas canvas) {
        System.out.println("onDraw init");
        if(listData!=null)
        {
            System.out.println("onDraw");
            Paint circlePaint = new Paint();
            circlePaint.setColor(circleColor);
            Paint linePaint = new Paint();
            linePaint.setColor(lineColor);
            for(int i=0;i<listData.size();i++)
            {
                if(pre_X==0 && pre_Y==0)  //说明开始画第一个圈圈
                {
                    pre_X=padding;
                    pre_Y = (mHeight - listData.get(i)*mHeight / maxValue);
                }
                System.out.println("pre_X="+pre_X+";pre_Y="+pre_Y);
                if(i > 0)  //这时需要画前一个线段
                {
                    canvas.drawLine(pre_X, pre_Y, pre_X+widthEMS, mHeight - listData.get(i)*mHeight / maxValue, linePaint);
                    pre_X = pre_X+widthEMS;
                    pre_Y = mHeight - listData.get(i)*mHeight / maxValue;
                }
                canvas.drawCircle(pre_X, pre_Y, default_circle_radius, circlePaint);
            }
        }

        super.onDraw(canvas);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        // 获取点击屏幕时的点的坐标
        float x = event.getX();
        float y = event.getY();
        System.out.println("x="+x+";y="+y+",event.getAction()"+event.getAction());
        return super.onTouchEvent(event);
    }
}

使用方法:

curveView = (CurveView) findViewById(R.id.v_curve);
        LayoutParams llparams = curveView.getLayoutParams();
        llparams.height = 140;
        llparams.width = 400;
        ArrayList<Float> listData = new ArrayList<Float>();
        listData.add(1f);
        listData.add(2f);
        listData.add(3f);
        listData.add(2f);
        listData.add(5f);
        listData.add(1f);
        listData.add(4f);
        curveView.DrawData(listData,Color.parseColor("#ffffff"),Color.parseColor("#ffffff"));

demo下载

时间: 2024-08-04 15:26:46

android 自定义折线图的相关文章

android自定义折线图

BrokenLine控件: import java.text.SimpleDateFormat; import java.util.ArrayList; import java.util.Calendar; import java.util.Collections; import java.util.Date; import java.util.GregorianCalendar; import java.util.List; import android.content.Context; im

android绘画折线图一

最近需要实现用android来画折线图,所以百度了一下,发现确实很多,也很乱,现在整理两种方法(第二种方法在[android绘画折线图二]中实现),仅供大家参考,一起学习研究. 第一种使用ChartFactory.getLineChartIntent()方法获取,这种方法首先需要一个achartengine-1.0.0.jar(项目中有),然后建立一个简单的android项目 项目中所需要导入的包有: import java.util.ArrayList; import java.util.Ha

Android自定义控件-折线图

好长时间没有更新博客了,终于可以抽出时间写点东西了,写点什么呢?最近在qq群里边有人问,下边的这个控件怎么画?如下图所示:图可以左右拖动,直到显示完全为止.刚开始看到这个效果图,我也想了一下总共分为以下几个步骤: (1)坐标轴的绘画,并绘画坐标轴上的坐标值 (2)绘画坐标上的点,并将其串联起来 (3)最后进行封闭图形的填充 (4)事件的拖动重绘 1.首先定义自定义属性文件,并确定坐标轴的颜色,宽度,坐标文字的大小,线的颜色等 <?xml version="1.0" encodin

Android画折线图、柱状图、饼图(使用achartengine.jar)

自从用了画折线的jar包之后,就不想再用canvas画布去画了,编程就是要站在巨人的肩膀上. 所需要的jar包achartenginejar 折线代码布局文件就不上传了很简单 另一种线的渲染器 扇形图代码 柱状图代码 属性总结部分代码 新测试代码下载地址 所需要的jar包:achartengine.jar 下载地址:http://download.csdn.net/detail/zhengyikuangge/9460642 折线代码(布局文件就不上传了,很简单): package com.exa

echarts自定义折线图横坐标时间间隔踩坑总结

折线图需求:横坐标为时间,要求按一定间隔展示,鼠标移至折线上间隔时间内的数据也可展示 其实很简单的一个配置就可搞定,但在不熟悉echarts配置的情况下,就很懵逼 xAxis: { boundaryGap: false, // 距离坐标原点是否有间隙 axisLabel: { //  如果这个字段不设置,echarts会根据屏宽及横坐标数据自动给出间隔 interval: 30, // 间隔长度,可自定义(如果是时间格式,echarts会自动处理) rotate: 40 // 横坐标上label

Android 自定义码表图

项目里面又碰到一个酷炫的刻度盘,还要带平滑动画的,真伤脑筋啊,网上搜索半天无果,果然还是得自己动手啊. 用时半天,做了一个DEMO,效果图如下: 代码如下,复制粘贴就能跑了: MeterView.java: /** * Copyright (C) 2015 * * MeterView.java * * Description: * * Author: Liao Longhui * * Ver 1.0, 2015-05-17, Liao Longhui, Create file */ packag

qt 自定义折线图

一.  底层代码开发示例 参考: https://blog.csdn.net/qq_37385181/article/details/83055915 demo下载地址:https://download.csdn.net/download/qq_37385181/10774870 二 qt Qtchart开发示例 https://blog.csdn.net/zcy123321/article/details/90024845 https://blog.csdn.net/mars_xiaolei/

iOS 动画绘制线条颜色渐变的折线图

效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有的也使用了动画,但是线条颜色渐变的折线图的demo少之又少,甚至可以说没有.该Blog阐述了动画绘制线条颜色渐变的折线图的实现方案,以及折线图线条颜色渐变的实现原理,并附以完整的示例. 成果 本人已将折线图封装到了一个UIView子类中,并提供了相应的接口.该自定义折线图视图,基本上可以适用于大部分

Android自定义视图三:给自定义视图添加“流畅”的动画

在第二部分我们实现了一个简单的折线图.这里假设你已经读了前篇.下面我们将继续为这个折线图添砖加瓦. 我在想给这个图的上方添加三个按钮,这样用户可以点选不同的按钮来查看不同类别的数据.比如,用户可以查看走路的.跑步的和骑车的.用户点不同的按钮,我们就跟还不同的运动数据显示在图形里. 我们实现了按钮点击后,设置不同的坐标点数据,然后运行APP.你会发现,虽然方法setChartData()已经被调用了,但是图形一点变化都没有.为什么呢?因为我们没有通知折线图"重绘".这可以通过调用inva