Android超级好看的动态图表

逃离我推掉我的手 2024-04-08 10:26 55阅读 0赞

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

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());
                }
            });
        }
    }

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

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