一、 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);
添加按钮布局和点击事件;
网友评论