最近项目中需要实现一个折线图，这就找到了# MPAndroidChart这个控件，在疯狂查找资料后终于实现了。
先看效果
废话不多说，直接上代码，注释很清楚
布局文件
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart"
android:layout_width="match_parent"
android:layout_marginLeft="@dimen/activity_horizontal_margin"
android:layout_marginRight="@dimen/activity_horizontal_margin"
android:layout_marginBottom="@dimen/activity_horizontal_margin"
android:layout_height="220dp"
android:layout_centerInParent="true"/>
java代码
lineChart = (LineChart) findViewById(R.id.lineChart);
initLineChart(/**数据集**/);
/**
* 初始化曲线图表
*
* @param list 数据集
*/
private void initLineChart(final List<Integer> list)
{
//显示边界
lineChart.setDrawBorders(false);
//设置数据
List<Entry> entries = new ArrayList<>();
for (int i = 0; i < list.size(); I++)
{
entries.add(new Entry(i, (float) list.get(i)));
}
//一个LineDataSet就是一条线
LineDataSet lineDataSet = new LineDataSet(entries, "");
//线颜色
lineDataSet.setColor(Color.parseColor("#F15A4A"));
//线宽度
lineDataSet.setLineWidth(1.6f);
//不显示圆点
lineDataSet.setDrawCircles(false);
//线条平滑
lineDataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
//设置折线图填充
// lineDataSet.setDrawFilled(true);
LineData data = new LineData(lineDataSet);
//无数据时显示的文字
lineChart.setNoDataText("暂无数据");
//折线图不显示数值
data.setDrawValues(false);
//得到X轴
XAxis xAxis = lineChart.getXAxis();
//设置X轴的位置（默认在上方)
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
//设置X轴坐标之间的最小间隔
xAxis.setGranularity(1f);
//设置X轴的刻度数量，第二个参数为true,将会画出明确数量（带有小数点），但是可能值导致不均匀，默认（6，false）
xAxis.setLabelCount(list.size() / 6, false);
//设置X轴的值（最小值、最大值、然后会根据设置的刻度数量自动分配刻度显示）
xAxis.setAxisMinimum(0f);
xAxis.setAxisMaximum((float) list.size());
//不显示网格线
xAxis.setDrawGridLines(false);
// 标签倾斜
xAxis.setLabelRotationAngle(45);
//设置X轴值为字符串
xAxis.setValueFormatter(new IAxisValueFormatter()
{
@Override
public String getFormattedValue(float value, AxisBase axis)
{
int IValue = (int) value;
CharSequence format = DateFormat.format("MM/dd",
System.currentTimeMillis()-(long)(list.size()-IValue)*24*60*60*1000);
return format.toString();
}
});
//得到Y轴
YAxis yAxis = lineChart.getAxisLeft();
YAxis rightYAxis = lineChart.getAxisRight();
//设置Y轴是否显示
rightYAxis.setEnabled(false); //右侧Y轴不显示
//设置y轴坐标之间的最小间隔
//不显示网格线
yAxis.setDrawGridLines(false);
//设置Y轴坐标之间的最小间隔
yAxis.setGranularity(1);
//设置y轴的刻度数量
//+2：最大值n就有n+1个刻度，在加上y轴多一个单位长度，为了好看，so+2
yAxis.setLabelCount(Collections.max(list) + 2, false);
//设置从Y轴值
yAxis.setAxisMinimum(0f);
//+1:y轴多一个单位长度，为了好看
yAxis.setAxisMaximum(Collections.max(list) + 1);
//y轴
yAxis.setValueFormatter(new IAxisValueFormatter()
{
@Override
public String getFormattedValue(float value, AxisBase axis)
{
int IValue = (int) value;
return String.valueOf(IValue);
}
});
//图例：得到Lengend
Legend legend = lineChart.getLegend();
//隐藏Lengend
legend.setEnabled(false);
//隐藏描述
Description description = new Description();
description.setEnabled(false);
lineChart.setDescription(description);
//折线图点的标记
MyMarkerView mv = new MyMarkerView(this);
lineChart.setMarker(mv);
//设置数据
lineChart.setData(data);
//图标刷新
lineChart.invalidate();
}
自定义折线图标记
public class MyMarkerView extends MarkerView
{
private TextView tvContent;
private DecimalFormat format = new DecimalFormat("##0");
public MyMarkerView(Context context) {
super(context, R.layout.layout_markerview);//这个布局自己定义
tvContent = (TextView) findViewById(R.id.tvContent);
}
//显示的内容
@Override
public void refreshContent(Entry e, Highlight highlight) {
tvContent.setText(format(e.getX())+"\n"+format.format(e.getY())+"辆");
super.refreshContent(e, highlight);
}
//标记相对于折线图的偏移量
@Override
public MPPointF getOffset() {
return new MPPointF(-(getWidth() / 2), -getHeight());
}
//时间格式化（显示今日往前30天的每一天日期）
public String format(float x)
{
CharSequence format = DateFormat.format("MM月dd日",
System.currentTimeMillis()-(long) (30-(int)x)*24*60*60*1000);
return format.toString();
}
}
注意的点
- 当图表放在scrollview或者listview中，会发现上下不能缩放，出现滑动冲突，解决方法如下
//解决滑动冲突
lineChart.setOnTouchListener(new View.OnTouchListener()
{
@Override
public boolean onTouch(View v, MotionEvent event)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
{
scrollview.requestDisallowInterceptTouchEvent(true);
break;
}
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
{
scrollview.requestDisallowInterceptTouchEvent(false);
break;
}
}
return false;
}
});
- X轴的标注显示不完整
这里要注意
lineChart.setData(data);//设置数据
这个方法一定要放在最后
