MPAndroidChart(2)多条曲线图LineChart

一、 LineChart创建多条曲线

前面说过 一个LineDataSet就是一条曲线，需要两条曲线的时候 在创建一个LineDataSet 添加进去即可

/**
 * 添加曲线
 */
private void addLine(List<CompositeIndexBean> dataList, String name, int color) {
    List<Entry> entries = new ArrayList<>();
    for (int i = 0; i < dataList.size(); i++) {
        CompositeIndexBean data = dataList.get(i);
        Entry entry = new Entry(i, (float) data.getRate());
        entries.add(entry);
    }
    // 每一个LineDataSet代表一条线
    LineDataSet lineDataSet = new LineDataSet(entries, name);
    initLineDataSet(lineDataSet, color, LineDataSet.Mode.LINEAR);
    lineChart.getLineData().addDataSet(lineDataSet);
    lineChart.invalidate();
}

调用改方法即可，当然也可以在 showLineChart方法中 创建两条曲线。

    showLineChart(list, "收益", ContextCompat.getColor(this,R.color.blue));
    //添加一条曲线
    List<CompositeIndexBean> indexBeanList = lineChartBean.getGRID0().getResult().getCompositeIndexShanghai();
    addLine(indexBeanList, "上证指数", ContextCompat.getColor(this,R.color.orange));

此时的效果

1.png

二、MarkerView显示所有曲线的X Y 轴值

现在两条曲线了，前面MarkerView只是显示收益的数据。现在需要显示所有曲线的值，也就是在MarkerView 的 refreshContent中需要获取到我们展示的数据。

两种方式可以实现：
（1)通过MarkerView构造方法 传入我们所展示的数据的集合

（2)通过MarkerView 获取到当前的LineChart，然后通过LineChart获取LineData，图表展示的数据 都在LineData中可以得到
采用方式二比较方便，代码如下：

public class MultipleLineChartMarkView extends MarkerView {

private TextView tvDate;
private TextView tvValue;
private TextView tvUpperValue;
private ValueFormatter xAxisValueFormatter;
private DecimalFormat df = new DecimalFormat("0.00");

public MultipleLineChartMarkView(Context context, ValueFormatter xAxisValueFormatter) {
    super(context, R.layout.layout_multiple_line_mark_view);
    this.xAxisValueFormatter = xAxisValueFormatter;

    tvDate = findViewById(R.id.tv_date);
    tvValue = findViewById(R.id.tv_profit_value);
    tvUpperValue = findViewById(R.id.tv_upper_value);
}

@SuppressLint("SetTextI18n")
@Override
public void refreshContent(Entry e, Highlight highlight) {
    //展示自定义X轴值 后的X轴内容
    tvDate.setText(xAxisValueFormatter.getAxisLabel(e.getX(), null));
    Chart chart = getChartView();
    if (chart instanceof LineChart) {
        LineData lineData = ((LineChart) chart).getLineData();
        //获取到图表中的所有曲线
        List<ILineDataSet> dataSetList = lineData.getDataSets();
        for (int i = 0; i < dataSetList.size(); i++) {
            LineDataSet dataSet = (LineDataSet) dataSetList.get(i);
            //获取到曲线的所有在Y轴的数据集合，根据当前X轴的位置 来获取对应的Y轴值
            float y = dataSet.getValues().get((int) e.getX()).getY();
            if (i == 0) {
                tvValue.setText(dataSet.getLabel() + "：" + df.format(y * 100) + "%");
            }
            if (i == 1) {
                tvUpperValue.setText(dataSet.getLabel() + "：" + df.format(y * 100) + "%");
            }
        }
    }
    super.refreshContent(e, highlight);
}

@Override
public MPPointF getOffset() {
    return new MPPointF(-(getWidth() / 2), -getHeight());
}

搭建MarkView的布局文件 layout_multiple_line_mark_view.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/shape_square"
android:orientation="vertical">

<TextView
    android:id="@+id/tv_date"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textColor="@android:color/white" />

<TextView
    android:id="@+id/tv_profit_value"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:textColor="@android:color/white" />

<TextView
    android:id="@+id/tv_upper_value"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:textColor="@android:color/white" />
</LinearLayout>

调用设置markerView方法

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

现在的效果

2.png

三、重置某条曲线

曲线重置的实现

public void resetLine(int position, List<CompositeIndexBean> dataList, String name, int color) {
    LineData lineData = lineChart.getData();
    List<ILineDataSet> list = lineData.getDataSets();
    if (list.size() <= position) {
        return;
    }

    List<Entry> entries = new ArrayList<>();
    for (int i = 0; i < dataList.size(); i++) {
        CompositeIndexBean data = dataList.get(i);
        Entry entry = new Entry(i, (float) data.getRate());
        entries.add(entry);
    }

    LineDataSet lineDataSet = new LineDataSet(entries, name);
    initLineDataSet(lineDataSet, color,LineDataSet.Mode.LINEAR);
 
    lineData.getDataSets().set(position, lineDataSet);
    lineChart.invalidate();
}

调用该方法，将第二条曲线设置为深证指数

   //重置第二条曲线
    List<CompositeIndexBean> shenzheng = lineChartBean.getGRID0().getResult().getCompositeIndexShenzhen();
    resetLine(1, shenzheng, "深证指数", ContextCompat.getColor(this,R.color.orange));

效果如下

3.png

这个可以实现按钮切换重置的需求，需要设置不显示曲线名称（图例）Legend

   legend.setEnabled(false);

添加按钮布局和点击事件；