Android利用HelloChart绘制曲线

本文实例为大家分享了Android利用HelloChart绘制曲线的具体代码,供大家参考,具体内容如下

1、将jar包放到app下的libs文件夹中

2、build.gradle(app):

implementation files('libs\\hellocharts-library-1.5.8.jar')

3、MainActivity.java

package com.dj.drawlinestest;

import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;

import androidx.appcompat.app.AppCompatActivity;

import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;
import java.util.Random;

import lecho.lib.hellocharts.gesture.ContainerScrollType;
import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.view.LineChartView;

public class MainActivity extends AppCompatActivity {

    LineChartView lineChart;

    Random mRandom;
    Handler mHandler;
    MyRunnable mRunnable;
    DrawLinesUtil mDrawLinesUtil;

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

        mRandom = new Random();

        lineChart = findViewById(R.id.LineChart);
        mDrawLinesUtil = new DrawLinesUtil(lineChart);

        mRunnable = new MyRunnable();
        mHandler = new Handler();
        mHandler.postDelayed(mRunnable, 0);
    }

    private class MyRunnable implements Runnable {
        @Override
        public void run() {
            Integer number = Math.abs(mRandom.nextInt()) % 50 + 50;
            mDrawLinesUtil.updateLocNumList(number);
            mDrawLinesUtil.display_chart();
            mHandler.postDelayed(this, 1000);
        }
    }

}

4、activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <lecho.lib.hellocharts.view.LineChartView
        android:id="@+id/LineChart"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:alpha="0.6"></lecho.lib.hellocharts.view.LineChartView>

</LinearLayout>

5、工具类:

DrawLinesUtil.java

package com.dj.drawlinestest;

import android.graphics.Color;
import android.view.View;

import java.util.ArrayList;
import java.util.LinkedList;
import java.util.List;

import lecho.lib.hellocharts.gesture.ContainerScrollType;
import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.view.LineChartView;

public class DrawLinesUtil {

    LineChartView lineChart;
    private boolean inited;
    private int pointNumber;
    private List<PointValue> mPointValues ;
    private List<AxisValue>  mAxisXValues ;
    private List<Integer>    mLocNumList  ;

    /**
     * 构造函数
     * @param lineChart
     */
    public DrawLinesUtil(LineChartView lineChart) {
        this.lineChart = lineChart;
        this.inited = false;
        this.pointNumber = 60; // +默认显示60个点
        this.mPointValues    = new ArrayList<>();  // 数据点
        this.mAxisXValues    = new ArrayList<>();  // X轴标注
        this.mLocNumList     = new LinkedList<>(); // 数据源
    }

    /**
     * set  get
     * @return
     */
    public int getPointNumber() {
        return pointNumber;
    }

    public void setPointNumber(int pointNumber) {
        this.pointNumber = pointNumber;
    }

    public LineChartView getLineChart() {
        return lineChart;
    }

    public void setLineChart(LineChartView lineChart) {
        this.lineChart = lineChart;
    }

    public List<Integer> getLocNumList() {
        return mLocNumList;
    }

    /**
     * 供外部调用 添加数据
     * @param number
     */
    public void updateLocNumList(Integer number){
        if (mLocNumList.size() >= pointNumber) {
            mLocNumList.remove(0);
        }
        mLocNumList.add(number);
    }

    /**
     * 供外部调用 画曲线
     */
    public void display_chart()
    {
        if( ! inited ){
            setAttribute();
        }
        getXLables();
        getPoints();
        draw_linechart();
    }

    /**
     * 设置行为属性,支持缩放、滑动以及平移
     */
    private void setAttribute(){
        lineChart.setInteractive(true);
        lineChart.setZoomType(ZoomType.HORIZONTAL);
        lineChart.setMaxZoom((float) 2);//最大方法比例
        lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
        lineChart.setVisibility(View.GONE);
        inited = true;
    }

    /**
     * 设置X轴的显示
     */
    private void getXLables(){
        mAxisXValues.clear();
        for (int i = 0; i < mLocNumList.size(); i++) {
            mAxisXValues.add(new AxisValue(i).setLabel(""));//这里设置x轴的内容
        }
    }

    /**
     * 图表的每个点的显示
     */
    private void getPoints() {
        mPointValues.clear();
        //Log.v(TAG,"getPoints"+mLocNumList.size());
        for (int i = 0; i < mLocNumList.size(); i++) {
            mPointValues.add(new PointValue(i, mLocNumList.get(i)));
        }
    }

    /**
     * 内部方法 画曲线
     */
    private void draw_linechart(){

        Line line = new Line(mPointValues).setColor(Color.parseColor("#FFCD41"));//("#FFCD41"));  //折线的颜色(橙色)
        List<Line> lines = new ArrayList<>();
        line.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状  这里是圆形 (有三种 :ValueShape.SQUARE  ValueShape.CIRCLE  ValueShape.DIAMOND)
        line.setCubic(true);//曲线是否平滑,即是曲线还是折线
        line.setFilled(true);//是否填充曲线的面积
        line.setHasLabels(false);//曲线的数据坐标是否加上备注
        line.setHasLabelsOnlyForSelected(true);//点击数据坐标提示数据(设置了这个line.setHasLabels(true);就无效)
        line.setHasLines(true);//是否用线显示。如果为false 则没有曲线只有点显示
        line.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示(每个数据点都是个大的圆点)
        line.setPointRadius(3);
        lines.add(line);
        LineChartData data = new LineChartData();
        data.setLines(lines);

        //坐标轴
        Axis axisX = new Axis(); //X轴
        axisX.setTextSize(0);//设置字体大小
        //axisX.setMaxLabelChars(20); //最多几个X轴坐标,意思就是你的缩放让X轴上数据的个数7<=x<=mAxisXValues.length
        axisX.setValues(mAxisXValues);  //填充X轴的坐标名称
        data.setAxisXBottom(axisX); //x 轴在底部
        //data.setAxisXTop(axisX);  //x 轴在顶部
        // axisX.setHasLines(true); //x 轴分割线

        // Y轴是根据数据的大小自动设置Y轴上限(在下面我会给出固定Y轴数据个数的解决方案)
        Axis axisY = new Axis();  //Y轴
        axisY.setName("");//y轴标注
        axisY.setTextSize(8);//设置字体大小
        data.setAxisYLeft(axisY);  //Y轴设置在左边
        //axisY.setHasLines(true); //Y轴分割线

        //设置行为属性,支持缩放、滑动以及平移
        lineChart.setInteractive(true);
        lineChart.setZoomType(ZoomType.HORIZONTAL);
        lineChart.setMaxZoom((float) 2);//最大方法比例
        lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
        lineChart.setLineChartData(data);

        lineChart.setVisibility(View.VISIBLE);

        Viewport v2 = new Viewport(lineChart.getMaximumViewport());
        v2.top    = 100;
        v2.bottom = 0;
        if (mLocNumList.size()>24) {
            lineChart.setMaximumViewport(v2);
            Viewport v = new Viewport(lineChart.getMaximumViewport());
            v.left = mLocNumList.size() - 24-1;
            lineChart.setCurrentViewport(v);
        }else
        {
            v2.right  = 24;
            lineChart.setMaximumViewport(v2);
            lineChart.setCurrentViewport(v2);
        }
    }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • android贝塞尔曲线实现波浪效果

    本文实例为大家分享了android贝塞尔曲线实现波浪效果的具体代码,供大家参考,具体内容如下 因为手机录制gif不知道下什么软件好,所以暂时就先忽略效果图了 我在屏幕外多画了1.5个波浪,延伸至屏幕内.然后不断的循环,向右边移动.就有一种波浪的效果. 所以现在只需要画出左边的波长,然后再通过循环添加所有的波长即可. 第一个曲线已经确定了控制点和终点的坐标, 第二条曲线也可以很明显的看出来终点是在x轴的0点坐标,Y轴不变,而控制点是在负的波长的1/4的位置 有了上下曲线以后,其他的就可以直接通过循

  • Android 曲线图的绘制示例代码

    本文介绍了Android 曲线图的绘制示例代码,分享给大家,具体如下: 效果展示 效果展示.gif 使用方式 // 初始化数据表格相关 with(mTableView) { // 配置坐标系 setupCoordinator("日", "人", /*这里是横坐标的值*/0f, 5f, 10f, 15f, 20f, 25f, 30f) // 添加曲线, 确保纵坐标的数值位数相等 addWave(ContextCompat.getColor(this@MainActiv

  • Android 利用三阶贝塞尔曲线绘制运动轨迹的示例

    本篇文章主要介绍了Android 利用三阶贝塞尔曲线绘制运动轨迹的示例,分享给大家,具体如下: 实现点赞效果,自定义起始点以及运动轨迹 效果图: xml布局: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/rl_root&

  • Android LineChart绘制多条曲线的方法

    本文实例为大家分享了Android LineChart绘制多条曲线的具体代码,供大家参考,具体内容如下 目标效果: 1.新建custom_marker_view.xml页面作为点击弹出框的页面: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" andr

  • Android中贝塞尔曲线的绘制方法示例代码

    贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常利用贝塞尔曲线来精确画出曲线. 上面的介绍中,"线段像可伸缩的皮筋"这句话非常关键,但也特别好理解.至于贝塞尔曲线的详细内容大家可以查阅相关资料.        Android提供的贝塞尔曲线绘制接口 在Android开发中,要实现贝塞尔曲线其实还是很简单的,因为Android已经给我们提

  • Android贝塞尔曲线初步学习第二课 仿QQ未读消息气泡拖拽黏连效果

    上一节初步了解了Android端的贝塞尔曲线,这一节就举个栗子练习一下,仿QQ未读消息气泡,是最经典的练习贝塞尔曲线的东东,效果如下 附上github源码地址:https://github.com/MonkeyMushroom/DragBubbleView 欢迎star~ 大体思路就是画两个圆,一个黏连小球固定在一个点上,一个气泡小球跟随手指的滑动改变坐标.随着两个圆间距越来越大,黏连小球半径越来越小.当间距小于一定值,松开手指气泡小球会恢复原来位置:当间距超过一定值之后,黏连小球消失,气泡小球

  • Android编程之canvas绘制各种图形(点,直线,弧,圆,椭圆,文字,矩形,多边形,曲线,圆角矩形)

    本文实例讲述了Android编程之canvas绘制各种图形的方法.分享给大家供大家参考,具体如下: 1.首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into

  • Android实现价格走势自定义曲线图

    本文是引用开源图表库框架 MPAndroidChart的LineChart 地址:https://github.com/PhilJay/MPAndroidChart 1.需求: (1)动态添加RadioButton,点击改变下面的LineChart数据 (2)LineChart绘制价格走势图,只显示最低点的小圆点和View,手指滑动,MarkView数据变化. (3) 服务端返回端数据,不是每一天端数据,但是x轴显示的必须是每一天的数据,这里是有我自己处理过的.返回里需要显示点的数组,之前的时间

  • Android把商品添加到购物车的动画效果(贝塞尔曲线)

    当我们写商城类的项目的时候,一般都会有加入购物车的功能,加入购物车的时候会有一些抛物线动画,具体代码如下: 实现效果如图: 思路: 确定动画的起终点 在起终点之间使用二次贝塞尔曲线填充起终点之间的点的轨迹 设置属性动画,ValueAnimator插值器,获取中间点的坐标 将执行动画的控件的x.y坐标设为上面得到的中间点坐标 开启属性动画 当动画结束时的操作 难点: PathMeasure的使用 - getLength() - boolean getPosTan(float distance, f

  • Android利用MPAndroidChart绘制曲线图表的基础教程

    前言 最近看了一下 Android 上的图表控件,去年做过一款应用也已上架了,也用到了图表控件,但是只是按照官方 demo 集成了,并没有过多的研究. 我最近基本上是面向 Github 编程了,拿别人造好的轮子拿来用,不能直接用的就改改再用,实在不好实现的就劝说产品去改需求,基本这是个套路. 既然是图表控件,就上 github 一番搜索,关键字 chart,按照 java 一筛选,再按照 start 数量排序,由高到低.基本上 start 从高到低的图表控件就是 MPAndroidChart.h

随机推荐