MPAndroid-----Android图表之折线图LineChart

最新推荐文章于 2025-05-25 16:46:23 发布

原创最新推荐文章于 2025-05-25 16:46:23 发布 · 871 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#MPAndroid

Android 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何使用MPAndroidChart库在Android应用中创建和定制LineChart，包括设置数据、样式、动画效果以及交互功能，为开发者提供了一种直观展示数据变化的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

`Android图表之折线图`

/**
 * 折线图
 */
public class LineChartActivity extends AppCompatActivity {

    @BindView(R2.id.chart)
    LineChart lineChart;
    private XAxis xAxis;                //X轴
    private YAxis leftYAxis;            //左侧Y轴
    private YAxis rightYaxis;           //右侧Y轴
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_line_chart);
        ButterKnife.bind(this);
        /***XY轴的设置***/
        xAxis = lineChart.getXAxis();
        leftYAxis = lineChart.getAxisLeft();
        rightYaxis = lineChart.getAxisRight();
        List<ChartData> chartDataList = new ArrayList<ChartData>();
        ChartData chartData = new ChartData();
        ChartData chartData1 = new ChartData();
        ChartData chartData2 = new ChartData();
        ChartData chartData3 = new ChartData();
        ChartData chartData4 = new ChartData();
        ChartData chartData5 = new ChartData();
        ChartData chartData6 = new ChartData();
        chartData.setXvalue(1);
        chartData.setYvalue(2f);
        chartData1.setXvalue(2);
        chartData1.setYvalue(3f);
        chartData2.setXvalue(3);
        chartData2.setYvalue(2.4f);
        chartData3.setXvalue(4);
        chartData3.setYvalue(3.56f);
        chartData4.setXvalue(5);
        chartData4.setYvalue(3.59f);
        chartData5.setXvalue(6);
        chartData5.setYvalue(4.00f);
        chartData6.setXvalue(7);
        chartData6.setYvalue(4.56f);

        chartDataList.add(chartData);
        chartDataList.add(chartData1);
        chartDataList.add(chartData2);
        chartDataList.add(chartData3);
        chartDataList.add(chartData4);
        chartDataList.add(chartData5);
        chartDataList.add(chartData6);


        List<Entry> entries = new ArrayList<Entry>();


        for (ChartData data : chartDataList) {
            entries.add(new Entry(data.getXvalue()-1, data.getYvalue()));

        }

        LineDataSet dataSet = new LineDataSet(entries, "收入"); // add entries to dataset
        dataSet.setDrawFilled(true);
        dataSet.setColor(R.color.colorPrimary);
        dataSet.setValueTextColor(R.color.colorAccent); // styling, ...
        dataSet.setFormLineWidth(1f);

        LineData lineData = new LineData(dataSet);
        //背景颜色
        lineChart.setBackgroundColor(ContextCompat.getColor(LineChartActivity.this, R.color.c130));
        //是否显示边界
        lineChart.setDrawBorders(false);
        //是否展示网格线
        lineChart.setDrawGridBackground(false);
        //X轴设置显示位置在底部
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        //保证Y轴从0开始，不然会上移一点
        leftYAxis.setAxisMinimum(0f);
        rightYaxis.setAxisMinimum(0f);


        xAxis.setDrawGridLines(false);
        xAxis.setAxisMinimum(0f);
        xAxis.setGranularity(1f);

        //右侧网格
        rightYaxis.setDrawGridLines(false);
        //左侧网格
        leftYAxis.setDrawGridLines(true);
        //去掉右侧
        rightYaxis.setEnabled(false);
        //设置X Y轴网格线为虚线（实体线长度、间隔距离、偏移量：通常使用 0）
       leftYAxis.enableGridDashedLine(10f, 10f, 0f);
        lineChart.setData(lineData);//设置数据
        lineChart.invalidate(); // refresh


        List<ChartData> chartDataList1 = new ArrayList<ChartData>();
        ChartData chartData0 = new ChartData();
        ChartData chartData10 = new ChartData();
        ChartData chartData20 = new ChartData();
        ChartData chartData30 = new ChartData();
        ChartData chartData40 = new ChartData();
        ChartData chartData50 = new ChartData();
        ChartData chartData60 = new ChartData();
        chartData0.setXvalue(0);
        chartData0.setYvalue(1.2f);
        chartData10.setXvalue(1);
        chartData10.setYvalue(2.1f);
        chartData20.setXvalue(2);
        chartData20.setYvalue(2.1f);
        chartData30.setXvalue(3);
        chartData30.setYvalue(2.06f);
        chartData40.setXvalue(4);
        chartData40.setYvalue(3.09f);
        chartData50.setXvalue(5);
        chartData50.setYvalue(4.00f);
        chartData60.setXvalue(6);
        chartData60.setYvalue(4.1f);

        chartDataList1.add(chartData0);
        chartDataList1.add(chartData10);
        chartDataList1.add(chartData20);
        chartDataList1.add(chartData30);
        chartDataList1.add(chartData40);
        chartDataList1.add(chartData50);
        chartDataList1.add(chartData60);
        addLine(chartDataList1, "指数", getResources().getColor(R.color.c001));
        
        setMarkerView();

    }

    /**
     * LineChart创建多条曲线
     * 添加曲线
     */
    private void addLine(List<ChartData> dataList, String name, int color) {
        List<Entry> entries = new ArrayList<>();
        for (ChartData data : dataList) {
            entries.add(new Entry(data.getXvalue(), data.getYvalue()));

        }
        // 每一个LineDataSet代表一条线
        LineDataSet lineDataSet = new LineDataSet(entries, name);
        initLineDataSet(lineDataSet, color, LineDataSet.Mode.LINEAR);
        lineChart.getLineData().addDataSet(lineDataSet);
        lineChart.invalidate();
    }



    /**
     * 曲线初始化设置 一个LineDataSet 代表一条曲线
     *
     * @param lineDataSet 线条
     * @param color       线条颜色
     * @param mode
     */
    private void initLineDataSet(LineDataSet lineDataSet, int color, LineDataSet.Mode mode) {
        lineDataSet.setColor(color);
        lineDataSet.setCircleColor(color);
        lineDataSet.setLineWidth(1f);
        lineDataSet.setCircleRadius(3f);
        //设置曲线值的圆点是实心还是空心
        lineDataSet.setDrawCircleHole(false);
        lineDataSet.setValueTextSize(10f);
        //设置折线图填充
        lineDataSet.setDrawFilled(true);
        lineDataSet.setFormLineWidth(1f);
//        lineDataSet.setFormSize(15.f);
        if (mode == null) {
            //设置曲线展示为圆滑曲线（如果不设置则默认折线）
            lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
        } else {
            lineDataSet.setMode(mode);
        }
    }

    /**
     * 设置 可以显示X Y 轴自定义值的 MarkerView
     */
    public void setMarkerView(){
        LineChartMarkView mv = new LineChartMarkView(this, xAxis.getValueFormatter());
        mv.setChartView(lineChart);
        lineChart.setMarker(mv);
        lineChart.invalidate();

    }
}

布局文件 activity_line_chart.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".module.mvp.ui.activity.chart.LineChartActivity">
    <!--折线图-->
    <com.github.mikephil.charting.charts.LineChart

            android:id="@+id/chart"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

    </com.github.mikephil.charting.charts.LineChart>


</LinearLayout>