Android超级好看的动态图表

先看一下视频显示的效果：

QQ视频20220819164941

从视频效果来看，这个动态效果还是可以的，是引入别人写好的轮子，我们只需要在进行配置数据即可，接下来讲解如何制作。

首先引入第三方依赖库

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

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"
    android:padding="16dp"
    tools:context=".MainActivity">

    <com.github.mikephil.charting.charts.BarChart
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/bar_chart"
        android:layout_marginBottom="8dp"/>

    <com.github.mikephil.charting.charts.PieChart
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/pie_chart"
        android:layout_marginTop="8dp"/>

</LinearLayout>

目前还只是静态效果，要想实现动态效果还需要去MainActivity.java中去做相关的配置

MainActivity.java

package com.example.charttest;

import androidx.appcompat.app.AppCompatActivity;

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

import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.charts.PieChart;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.data.PieData;
import com.github.mikephil.charting.data.PieDataSet;
import com.github.mikephil.charting.data.PieEntry;
import com.github.mikephil.charting.utils.ColorTemplate;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    BarChart barChart;
    PieChart pieChart;

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

        barChart = findViewById(R.id.bar_chart);
        pieChart = findViewById(R.id.pie_chart);

        ArrayList<BarEntry> barEntries = new ArrayList<>();
        ArrayList<PieEntry> pieEntries = new ArrayList<>();

        for (int i = 0;i < 10;i++){
            float value = (float) (i*10.0);
            BarEntry barEntry = new BarEntry(i,value);
            PieEntry pieEntry = new PieEntry(i,value);

            barEntries.add(barEntry);
            pieEntries.add(pieEntry);
        }

        BarDataSet barDataSet = new BarDataSet(barEntries,"Employees");
        barDataSet.setColors(ColorTemplate.COLORFUL_COLORS);
        barDataSet.setDrawValues(false);
        barChart.setData(new BarData(barDataSet));
        barChart.animateY(5000);
        barChart.getDescription().setText("Employees Chart");
        barChart.getDescription().setTextColor(Color.BLUE);


        PieDataSet pieDataSet = new PieDataSet(pieEntries,"Student");
        pieDataSet.setColors(ColorTemplate.COLORFUL_COLORS);
        barDataSet.setDrawValues(false);
        pieChart.setData(new PieData(pieDataSet));
        pieChart.animateXY(5000,5000);
        pieChart.getDescription().setText("Student Chart");
        pieChart.getDescription().setTextColor(Color.BLUE);


        barChart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                System.out.println(barChart.getBarData().toString());
                barChart.getHighlightByTouchPoint(100,100);
                System.out.println(barChart.getDescription().getText().toString());
            }
        });

        pieChart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                System.out.println(pieChart.getDataSetIndexForIndex(View.generateViewId()));
                System.out.println(pieChart.getCenterTextRadiusPercent());
                System.out.println(pieChart.getRadius());
            }
        });
    }
}

这样就实现了视频中的效果，还是比较简单的。

希望一键三连，感谢关注！