Android 图表开源框架之MPAndroidChart LineChart折线图（五）

最新推荐文章于 2024-04-29 15:58:41 发布

冰糖葫芦三剑客

最新推荐文章于 2024-04-29 15:58:41 发布

阅读量948

点赞数

分类专栏： MPAndroidChart

本文链接：https://blog.csdn.net/shenggaofei/article/details/107846625

版权

MPAndroidChart 专栏收录该内容

5 篇文章 3 订阅

订阅专栏

Android 图表开源框架之MPAndroidChart LineChart折线图（一）

Android 图表开源框架之MPAndroidChart LineChart折线图（二）

Android 图表开源框架之MPAndroidChart LineChart折线图（三）

Android 图表开源框架之MPAndroidChart LineChart折线图（四）动态添加数据

Android 图表开源框架之MPAndroidChart PieChart扇形图（一）

Android 图表开源框架之MPAndroidChart PieChart扇形图（二）

Android 图表开源框架之MPAndroidChart LineChart之常用自定义设置功能

一.快速实现：

1.添加依赖：

app build.gradle文件：

 implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'

packagingOptions {
        exclude 'META-INF/proguard/androidx-annotations.pro'
    }

最外层build.gradle文件：

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    
    repositories {
        google()
        jcenter()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.1.3'
        

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        google()
        jcenter()
        maven { url "https://jitpack.io" }
    }
}

task clean(type: Delete) {
    delete rootProject.buildDir
}

2.主函数逻辑：

private LineChart lineChart;
    float datas[] = {14f,15f,16f,17f,16f,16f};
    float datas2[] = {17f,16f,15f,14f,17f,14f};
    final String weeks[] = {"昨天","今天","明天","周五","周六","周日"};
    //在MPAndroidChart一般都是通过List<Entry>对象来装数据的
    final List<Entry> entries = new ArrayList<Entry>(); 

 lineChart = (LineChart) findViewById(R.id.lineChart);

 setThreeMpChart();

 /**
     * 3.1.0版本使用
     */
    public void setThreeMpChart(){
        //循环取出数据
        for(int i = 0; i < datas.length; i++){
            entries.add(new Entry(i,datas[i]));
        }
        Description description = new Description();//描述信息
        description.setEnabled(false);//是否可用
        lineChart.setDescription(description);//不然会显示默认的 Description。
        lineChart.setTouchEnabled(true); // 设置是否可以触摸
        lineChart.setDragEnabled(true);// 是否可以拖拽
        lineChart.setScaleEnabled(true);// 是否可以缩放
        lineChart.setPinchZoom(true);//y轴的值是否跟随图表变换缩放;如果禁止，y轴的值会跟随图表变换缩放
        lineChart.setDoubleTapToZoomEnabled(false);//是否允许双击进行缩放
        lineChart.setScaleXEnabled(true);//是否允许以X轴缩放
        lineChart.setDrawGridBackground(false);// 是否显示表格颜色
        lineChart.setGridBackgroundColor(Color.TRANSPARENT);// 表格的的颜色
        lineChart.animateY(1000, Easing.Linear);//设置动画
        lineChart.setExtraBottomOffset(5f);//防止底部数据显示不完整，设置底部偏移量
        lineChart.setExtraRightOffset(45f);//防止右侧数据显示不完整，设置底部偏移量

//x轴配置
        XAxis xAxis = lineChart.getXAxis();
        xAxis.setEnabled(true);//是否可用
        xAxis.setDrawLabels(true);//是否显示数值
        xAxis.setDrawAxisLine(true);//是否显示坐标线
        xAxis.setAxisLineColor(Color.BLACK);//设置坐标轴线的颜色
        xAxis.setAxisLineWidth(0.8f);//设置坐标轴线的宽度
        xAxis.setDrawGridLines(false);//是否显示竖直风格线
        xAxis.setTextColor(Color.BLACK);//X轴文字颜色
//        xAxis.setTextSize(12f);//X轴文字大小
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//X轴文字显示位置
        xAxis.setSpaceMin(1f);//左空白区大小
        xAxis.setSpaceMax(1f);//右空白区大小
        xAxis.setGranularity(1);//间隔1
        //设置X轴坐标自定义数据格式
        xAxis.setValueFormatter(new IndexAxisValueFormatter(){
            @Override
            public String getFormattedValue(float value) {
                //设置当前时间

                int IValue = (int) value;
                int a =(entries.size() - IValue);
//                CharSequence format = DateFormat.format("MM/dd",
//                        System.currentTimeMillis() - (long) (entries.size() - IValue) * 24 * 60 * 60 * 1000);
//                return format.toString();
//                return super.getFormattedValue(value);
                //自定义样式 IAxisValueFormatter  星期
                //防止数组越界判断范围
                if (IValue < 0 || IValue >= weeks.length) {
                    return "";
                } else {
                    return weeks[IValue];
                }
            }
        });
        xAxis.setGranularity(1);//间隔1
//左y轴配置
        YAxis lyAxis = lineChart.getAxisLeft();
        lyAxis.setEnabled(true);//是否可用
        lyAxis.setDrawLabels(true);//是否显示数值
        lyAxis.setDrawAxisLine(true);//是否显示坐标线
        lyAxis.setDrawGridLines(false);//是否显示水平网格线
        lyAxis.setDrawZeroLine(true);是否绘制零线
        lyAxis.setZeroLineColor(Color.BLACK);
//        lyAxis.setZeroLineWidth(0.8f);
//        lyAxis.enableGridDashedLine(10f, 10f, 0f);//网格虚线
        lyAxis.setGridColor(Color.BLACK);//网格线颜色
        lyAxis.setGridLineWidth(0.8f);//网格线宽度
        lyAxis.setAxisLineColor(Color.BLACK);//坐标线颜色
        lyAxis.setTextColor(Color.BLACK);//左侧文字颜色
        lyAxis.setTextSize(12f);//左侧文字大小
//右y轴配置
        YAxis ryAxis = lineChart.getAxisRight();
        ryAxis.setEnabled(true);//是否可用
        // 不显示y轴右边的值
        ryAxis.setEnabled(false);
        ryAxis.setDrawAxisLine(true);
        ryAxis.setDrawZeroLine(true);
//        ryAxis.setZeroLineWidth(1f);
        ryAxis.setAxisLineWidth(0.8f);//设置右侧边界线宽度
        ryAxis.setAxisLineColor(Color.BLACK);

        //X轴左侧数据设置
//        YAxis axisLeft = lineChart.getAxisLeft();
//        axisLeft.setEnabled(true);//是否可用
//        // 不显示y轴左边的值
//        axisLeft.setEnabled(true);
//        axisLeft.setDrawAxisLine(true);
//        axisLeft.setDrawZeroLine(true);
        ryAxis.setZeroLineWidth(1f);
//        axisLeft.setAxisLineWidth(1);//设置左侧边界线宽度
//        axisLeft.setAxisLineColor(Color.BLACK);

//标签配置
        Legend legend = lineChart.getLegend();
        legend.setEnabled(true);//是否可用

        //x轴和y轴的数据


        //循环取出数据
//        for(int i = 0; i < datas2.length; i++){
//            entries.add(new Entry(i,datas2[i]));
//        }
//        YourData[] dataObjects = ...;
//        List<Entry> entries = new ArrayList<Entry>();
//        for (YourData data : dataObjects) {
//            entries.add(new Entry(data.getValueX(), data.getValueY()));
//        }
        LimitLine limitLineL = new LimitLine(15f, "临界点");//临界点
        limitLineL.setLineColor(Color.RED);
        limitLineL.setLineWidth(1.5f);
        limitLineL.setTextSize(10f);
        limitLineL.setTextColor(Color.RED);
        limitLineL.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);//标签位置
        limitLineL.enableDashedLine(5f,8f,0);  //设置虚线
        lineChart.getAxisLeft().addLimitLine(limitLineL);

        LimitLine limitLine2 = new LimitLine(14.5f, "SD");//临界点
        limitLine2.setLineColor(Color.RED);
        limitLine2.setLineWidth(1.5f);
        limitLine2.setTextSize(10f);
        limitLine2.setTextColor(Color.RED);
        limitLine2.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);//标签位置
        limitLine2.enableDashedLine(5f,8f,0);  //设置虚线
        lineChart.getAxisLeft().addLimitLine(limitLine2);


        //折线图点的标记
        MyMarkerView mv = new MyMarkerView(this);
        lineChart.setMarker(mv);
        LineDataSet dataSet = new LineDataSet(entries, "Label"); // 添加数据
        // 自定义各种数据样式（不设置则使用默认值）
//        dataSet.setColor(...);
//        dataSet.setValueTextColor(...);
        LineData lineData = new LineData(dataSet);
        //多个折线时使用
//        LineDataSet lineDataSet = new LineDataSet(entries,"ONE");
//        LineDataSet lineDataSet2 = new LineDataSet(entries,"TWO");
//        //保存LineDataSet集合
//        ArrayList<ILineDataSet> dataSets = new ArrayList<>();
//        dataSets.add(lineDataSet); // add the datasets
//        dataSets.add(lineDataSet2); // add the datasets
//        LineData lineDataLists = new LineData(dataSets);//添加多个折线集合

//        dataSet.setColor(Color.RED);//设置折线的颜色
        dataSet.setCircleSize(5f);// 显示的圆形大小
        dataSet.setCircleColor(Color.RED);//设置圆点的颜色
        //设置曲线值的圆点是实心还是空心
        dataSet.setDrawCircleHole(true);
        dataSet.setDrawFilled(true);//设置不画数据覆盖的阴影层
//        dataSet.setDrawValues(false);//不绘制线的数据
//        dataSet.setLineWidth(2f);//设置折线宽度
//        dataSet.setCircleRadius(6f);
        // 填充曲线下方的区域，红色，半透明。
        dataSet.setDrawFilled(true);
        dataSet.setFillAlpha(65);
//        dataSet.setFillColor(Color.WHITE);
//        dataSet.setDrawCircleHole(false);
        dataSet.setDrawCircles(true);//是否显示圆心
        dataSet.setValueTextColor(Color.rgb(89, 194, 230)); //数值显示的颜色
        dataSet.setValueTextSize(8f);     //数值显示的大小
        // 设置平滑曲线
//        dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
        lineChart.setData(lineData);
//        lineChart.animateX(2000);
        lineChart.invalidate(); // 刷新
//        Matrix m = new Matrix();
//        m.postScale(1, 1f);//两个参数分别是x,y轴的缩放比例。例如：将x轴的数据放大为之前的1.5倍，《这个地方是在设置能滑动的时候编辑的，假如X轴最多展示5条但是呢有10条数据，那么这里就是2,1》
        lineChart.getViewPortHandler().refresh(new Matrix(),lineChart,true);//将图表动画显示之前进行缩放
    }
    /**
//     * 更新图表
//     *
//     * @param chart   图表
//     * @param values  数据
//     * @param valueType 数据类型
//     */
//    public static void notifyDataSetChanged(LineChart chart, List<Entry> values,
//                                            final int valueType) {
//        chart.getXAxis().setValueFormatter(new IAxisValueFormatter() {
//            @Override
//            public String getFormattedValue(float value, AxisBase axis) {
//                return weeks(valueType)[(int) value];
//            }
//        });
//
//        chart.invalidate();
        setChartData(chart, values);
//    }

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

3.自定义MarkerView显示视图：

import android.content.Context;
import android.text.format.DateFormat;
import android.widget.TextView;

import com.github.mikephil.charting.components.MarkerView;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.utils.MPPointF;

import java.text.DecimalFormat;

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(e.getX())+"\n"+format.format(e.getY())+"辆");
        tvContent.setText(format.format(e.getY())+"辆");
        super.refreshContent(e, highlight);
    }

    //标记相对于折线图的偏移量
    @Override
    public MPPointF getOffset() {
        return new MPPointF(-(getWidth() / 2), -getHeight());
    }

    //时间格式化（显示今日往前30天的每一天日期）
    public String  format(float x)
    {
        CharSequence format = DateFormat.format("MM月dd日",
                System.currentTimeMillis()-(long) (30-(int)x)*24*60*60*1000);
        return format.toString();
    }
}

4.MarkerView布局：

<?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">

    <LinearLayout
        android:background="@drawable/bg_shape_c"
        android:layout_width="match_parent"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:paddingTop="6dp"
        android:paddingBottom="6dp"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/tvContent"
            android:text="KING"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

5.背景色：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#fff" />
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
    <stroke android:width="1dp" android:color="@color/colorPrimaryDark"></stroke>
</shape>

 <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="transparent_gray_light">#89000000</color>
    <color name="white">#fff</color>
    <color name="split_line2">#333</color>
    <color name="divider">#ffd2d2d2</color>

    <color name="light_green_900">#33691E</color>
    <color name="purple_500">#9C27B0</color>
    <color name="pink_500">#FF4081</color>
    <color name="orange_500">#FF9800</color>
    <color name="cyan_500">#00BCD4</color>
    <color name="yellow_900">#F57F17</color>


    <color name="item_bg">#454545</color>
    <color name="item_bg_pressed">#707070</color>

    <color name="green">#00ff00</color>
    <color name="dark">#FF222222</color>
    <color name="light">#FFEEEEEE</color>

https://github.com/PhilJay/MPAndroidChart

冰糖葫芦三剑客

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Android 图表开源框架之MPAndroidChart LineChart折线图（五）

Android 图表开源框架之MPAndroidChart LineChart折线图（一）Android 图表开源框架之MPAndroidChart LineChart折线图（二）Android 图表开源框架之MPAndroidChart LineChart折线图（三）Android 图表开源框架之MPAndroidChart LineChart折线图（四）动态添加数据Android 图表开源框架之MPAndroidChart LineChart之常用自定义设置功能...
复制链接

扫一扫

专栏目录