MPAndroidChart折线图切换数据点数量后无法填满视图求助

问题描述 #

向LineChart添加365个数据点时，折线能填满宽度为250dp的图表区域；但清空数据后添加25个数据点，折线无法延伸至视图末端，调用lineChart.fitScreen()也没有效果。使用的库版本为implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'。

复现代码 #

主活动代码

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.linechart)
    LineChart lineChart;

    private final List<Entry> entries = new ArrayList<>();
    private LineDataSet dataSet;

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

        dataSet = new LineDataSet(entries, null);
        Drawable drawable = ContextCompat.getDrawable(this, R.drawable.gradient_purple);
        dataSet.setFillDrawable(drawable);
        dataSet.setLineWidth(1.5f);
        dataSet.setDrawHorizontalHighlightIndicator(false);
        dataSet.setHighLightColor(Color.WHITE);
        dataSet.setHighlightLineWidth(1.5f);
        dataSet.setColor(ContextCompat.getColor(this, R.color.teal_700));
        dataSet.setDrawFilled(true);
        dataSet.setDrawCircles(false);
        dataSet.setDrawValues(false);

        lineChart.setMinOffset(0f);
        lineChart.getAxisLeft().setEnabled(false);
        lineChart.getAxisRight().setEnabled(false);
        lineChart.getXAxis().setEnabled(false);
        lineChart.setNoDataText(null);
        lineChart.setScaleEnabled(false);
        lineChart.getDescription().setEnabled(false);
        lineChart.getLegend().setEnabled(false);
    }

    @OnClick(R.id.btn_add_25)
    void onAdd25() {
        dataSet.clear();
        for (int i = 0; i < 25; i++) {
            Entry entry = new Entry(i, i);
            dataSet.addEntry(entry);
        }
        LineData lineData = new LineData(dataSet);
        lineChart.setData(lineData);

        //lineChart.fitScreen(); Adding fitScreen doesn't do anything
        lineChart.invalidate();
    }

    @OnClick(R.id.btn_add_365)
    void onAdd365() {
        dataSet.clear();
        for (int i = 0; i < 365; i++) {
            Entry entry = new Entry(i, i);
            dataSet.addEntry(entry);
        }
        LineData lineData = new LineData(dataSet);
        lineChart.setData(lineData);

        //lineChart.fitScreen(); Adding fitScreen doesn't do anything
        lineChart.invalidate();
    }
}

布局代码

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".ui.MainActivity">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/purple_500"
        android:elevation="4dp"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:fontFamily="sans-serif-medium"
            android:text="Test App"
            android:textColor="@color/white"
            android:textSize="20sp" />
    </androidx.appcompat.widget.Toolbar>

    <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/linechart"
        android:layout_width="250dp"
        android:layout_height="200dp"
        android:clipToPadding="false"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/toolbar" />

    <Button
        android:id="@+id/btn_add_25"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="300dp"
        android:text="Add 25"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        android:id="@+id/btn_add_365"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="200dp"
        android:text="Add 365"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

解决方案 #

问题根源是MPAndroidChart在切换数据时，会保留之前的X轴范围缓存。当从365个数据切换到25个时，图表仍沿用了之前较大的X轴范围，导致少量数据无法填满整个视图。

方法一：手动指定X轴范围 #

在每次设置新数据后，强制指定X轴的最小和最大值为当前数据的起止索引：

修改onAdd25()和onAdd365()方法，在lineChart.setData(lineData)之后添加以下代码：

// 适配当前数据的X轴范围
lineChart.getXAxis().setAxisMinimum(0f);
lineChart.getXAxis().setAxisMaximum(dataSet.getEntryCount() - 1f);
lineChart.invalidate();

修改后的onAdd25()示例：

@OnClick(R.id.btn_add_25)
void onAdd25() {
    dataSet.clear();
    for (int i = 0; i < 25; i++) {
        Entry entry = new Entry(i, i);
        dataSet.addEntry(entry);
    }
    LineData lineData = new LineData(dataSet);
    lineChart.setData(lineData);

    lineChart.getXAxis().setAxisMinimum(0f);
    lineChart.getXAxis().setAxisMaximum(dataSet.getEntryCount() - 1f);
    lineChart.invalidate();
}

方法二：使用fitScreen并确保数据更新通知 #

如果想用fitScreen()，需要先通知图表数据集已变更，再调用适配方法：

lineChart.setData(lineData);
lineChart.notifyDataSetChanged();
lineChart.fitScreen();
lineChart.invalidate();

两种方法都能让图表根据当前数据自动适配宽度，填满整个视图区域。

内容的提问来源于stack exchange，提问作者WHOATEMYNOODLES