MPAndroidChart 初入门


官网

git网站

官方文档

配置

首先在Android 配置MPAndroidChart

git官网上给的提示是:

repositories {
    maven { url 'https://jitpack.io' }
}

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

在这里插入图片描述
这并不是在一个文件中配置,不要添加错了:
在porject /bulid.gradle中:
在这里插入图片描述
app/bulid.gradle:
在这里插入图片描述

基本属性

图表类有共同的特点

X轴:XAxis

1.得到x轴

XAxis xAxis = lineChart.getXAxis();

2.设置x轴位置
可选值:BOTTOM,BOTH_SIDED,BOTTOM_INSIDE,TOP,TOP_INSIDE

xAxis.setPosition(XAxis.XAxisPosition.BOTH_SIDED);

3.设置X轴坐标之间的最小间隔

xAxis.setGranularity(1f);

4.设置x轴的刻度数量
//第二个参数表示是否被平均分配

//xAxis.setLabelCount(12,true);

5.设置x轴的最小值最大值,系统根据刻度数量自动分配刻度显示

xAxis.setAxisMinimum(0f);
xAxis.setAxisMaximum(100f);

6.设置x轴为字符串

xAxis.setValueFormatter(new IndexAxisValueFormatter() {
    @Override
    public String getFormattedValue(float value) {
        return super.getFormattedValue(value);
    }
});

Y轴:YAxis

1.得到Y轴

        //YAxis leftAxis = lineChart.getAxis(YAxis.AxisDependency.LEFT);
        YAxis leftAxis = lineChart.getAxisLeft();
        
        //YAxis rAxis = lineChart.getAxis(YAxis.AxisDependency.RIGHT);
        YAxis rightAxis = lineChart.getAxisRight();

2.设置从Y轴值

leftYAxis.setAxisMinimum(0f);
leftYAxis.setAxisMaximum(100f);

rightYAxis.setAxisMinimum(0f);
rightYAxis.setAxisMaximum(100f);

3.设置Y轴是否显示(效果如上右图)

rightYAxis.setEnabled(false); //右侧Y轴不显示

4.X轴和Y轴类似,都具有相同的属性方法

rightYAxis.setGranularity(1f);
rightYAxis.setLabelCount(11,false);
rightYAxis.setTextColor(Color.BLUE); //文字颜色
rightYAxis.setGridColor(Color.RED); //网格线颜色
rightYAxis.setAxisLineColor(Color.GREEN); //Y轴颜色

5.限制线LimitLine(如上右图)

LimitLine limitLine = new LimitLine(95,"高限制性"); //得到限制线
limitLine.setLineWidth(4f); //宽度
limitLine.setTextSize(10f);
limitLine.setTextColor(Color.RED);  //颜色
limitLine.setLineColor(Color.BLUE);
rightYAxis.addLimitLine(limitLine); //Y轴添加限制线

6.自定义y轴

图例:Legend

1.得到Lengend

Legend legend = mLineChart.getLegend();

2.设置Lengend颜色

legend.setTextColor(Color.CYAN); //设置Legend 文本颜色

3.设置Lengend位置

legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);

4.设置标签是否换行
true换行,false 不换行

legend.setWordWrapEnabled(true);

5.隐藏Lengend

legend.setEnabled(false);

描述:Description

1.隐藏描述

Description description = new Description();
description.setEnabled(false);
lineChart.setDescription(description);

2.设置描述内容

Description description = new Description();
description.setText("X轴描述");
description.setTextSize(45);//字体大小
description.setTextColor(Color.RED);//字体颜色
lineChart.setDescription(description);//

限制线:LimitLine

MarkerView

MarkerView可自定义,用于点击图标值时显示想要的内容 效果如上右图
1.自定义MarkerView

public class MyMarkerView extends MarkerView {

    private TextView tvContent;
    private DecimalFormat format = new DecimalFormat("##0");

    public MyMarkerView(Context context) {
        super(context, R.layout.layout_markerview);
        tvContent = (TextView) findViewById(R.id.tvContent);
    }

    @Override
    public void refreshContent(Entry e, Highlight highlight) {
        tvContent.setText(format.format(e.getY()));
        super.refreshContent(e, highlight);
    }

    @Override
    public MPPointF getOffset() {
        return new MPPointF(-(getWidth() / 2), -getHeight() - 10);
    }
}

2.设置显示MarkerView

MyMarkerView mv = new MyMarkerView(this);
lineChart.setMarkerView(mv);
折线图的线条设置
//一个LineDataSet就是一条线
LineDataSet lineDataSet = new LineDataSet(entries, "温度");
//设置曲线值的圆点是实心还是空心
lineDataSet.setDrawCircleHole(false);
//设置显示值的字体大小
lineDataSet.setValueTextSize(9f);
//线模式为圆滑曲线(默认折线)
lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);

折线图

案例:

布局:

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

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/lineChart"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_centerInParent="true"/>
</LinearLayout>

MainActivity.main

public class MainActivity extends AppCompatActivity {

    LineChart lineChart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lineChart = (LineChart) findViewById(R.id.lineChart);
        lineChart.setDrawBorders(true);

        //设置数据
        List<Entry> entries = new ArrayList<>();
        for (float i = 0; i < 100; i+=0.5) {
            entries.add(new Entry(i,(float)(Math.sin(i)) ));
        }

        //一个LineDataSet 就是一条线
        LineDataSet lineDataSet = new LineDataSet(entries, "温度");

        //线中的数据
        LineData data = new LineData(lineDataSet);
        lineChart.setData(data);

    }
}

在这里插入图片描述
如果不想要这些点的话:

lineDataSet.setDrawCircles(false);

在这里插入图片描述

有的图形上面可能有值,如果想去掉这些值:

lineDataSet.setDrawValues(false);

左图是没有值的,右图是有值的
在这里插入图片描述在这里插入图片描述

简单的动态正弦图

这里在按钮的点击方法里添加了一个线程,每隔0.05s沉睡线程,就营造了一种正弦波的效果

activity_main():

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:layout_gravity="center"
        android:orientation="vertical">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:hint="y=Asin(wx+φ)"
            android:gravity="center"

            android:textSize="30dp"/>
        <EditText
            android:id="@+id/A"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入振幅A,默认是1"/>

        <EditText
            android:id="@+id/w"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入频率w,默认是1"/>

        <EditText
            android:id="@+id/φ"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="请输入初相φ,默认是0"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.github.mikephil.charting.charts.LineChart
            android:id="@+id/dynamic_chart1"
            android:layout_width="match_parent"
            android:layout_height="380dp" />

        <Button
            android:id="@+id/refresh_data"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="刷新数据"
            />
    </LinearLayout>
</LinearLayout>

MainActivity

package com.example.mpandroidcharttest;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;

import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Description;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.LimitLine;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import com.github.mikephil.charting.formatter.IndexAxisValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;

import java.util.ArrayList;
import java.util.List;
import java.util.Map;

public class MainActivity extends AppCompatActivity {

    LineChart lineChart;
    LineData lineData;
    LineDataSet lineDataSet;
    private Button refresh;

    private EditText A;
    private EditText w;
    private EditText φ;

    private Integer sinA = 1;
    private Integer sinw = 1;
    private Integer sinφ = 0;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        lineChart = (LineChart) findViewById(R.id.dynamic_chart1);
        A = (EditText) findViewById(R.id.A);
        w = (EditText) findViewById(R.id.w);
        φ = (EditText) findViewById(R.id.φ);
        refresh = (Button) findViewById(R.id.refresh_data);

        refresh.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                lineChart.notifyDataSetChanged();
                lineChart.invalidate();

                lineChart.clear();
                String inputsinA = A.getText().toString().trim();
                String inputsinw = w.getText().toString().trim();
                String inputsinφ = φ.getText().toString().trim();

                if (!inputsinA.equals("")) {
                    sinA = (int) Double.parseDouble(A.getText().toString());
                }
                if (!inputsinw.equals("")) {
                    sinw = (int) Double.parseDouble(w.getText().toString());
                }
                if (!inputsinφ.equals("")) {
                    sinφ = (int) Double.parseDouble(φ.getText().toString());
                }

                lineChart.setDrawBorders(true);


                //设置数据
                final List<Entry> entries = new ArrayList<>();
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        for (float i = 0; i < 300; i += 0.1) {
                            try {
                                Thread.sleep(50);//先沉睡线程0.05s
                            } catch (InterruptedException e) {
                                e.printStackTrace();
                            }

                            //设置xy轴数据关系
                            entries.add(new Entry(i, (float) (sinA * Math.sin(sinw * i + sinφ))));

                            //一个LineDataSet 就是一条线
                            lineDataSet = new LineDataSet(entries, "");
                            lineDataSet.setDrawCircles(false);   //不要圆点
                            lineDataSet.setDrawValues(false);//不要值
                            lineData = new LineData(lineDataSet);//线中的数据

                            //更新数据
                            lineChart.setData(lineData);

                            //通知数据已经改变
                            lineData.notifyDataChanged();
                            lineChart.notifyDataSetChanged();

                            lineChart.setVisibleXRangeMaximum(5);//设置在曲线图中显示的最大数量

                            lineChart.moveViewToX(lineData.getEntryCount() - 2);//图形往前移动

                        }
                    }
                }).start();
            }
        });
    }
}

https://blog.csdn.net/ww897532167/article/details/77334345?utm_source=app

猜你喜欢

转载自blog.csdn.net/weixin_45468845/article/details/106790039