最近項目中需要實現(xiàn)一個折線圖，這就找到了# MPAndroidChart這個控件，在瘋狂查找資料后終于實現(xiàn)了颊糜。
先看效果
廢話不多說拨与，直接上代碼稻据，注釋很清楚
布局文件
<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(/**數(shù)據(jù)集**/);
/**
* 初始化曲線圖表
*
* @param list 數(shù)據(jù)集
*/
private void initLineChart(final List<Integer> list)
{
//顯示邊界
lineChart.setDrawBorders(false);
//設(shè)置數(shù)據(jù)
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);
//設(shè)置折線圖填充
// lineDataSet.setDrawFilled(true);
LineData data = new LineData(lineDataSet);
//無數(shù)據(jù)時顯示的文字
lineChart.setNoDataText("暫無數(shù)據(jù)");
//折線圖不顯示數(shù)值
data.setDrawValues(false);
//得到X軸
XAxis xAxis = lineChart.getXAxis();
//設(shè)置X軸的位置（默認在上方)
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
//設(shè)置X軸坐標之間的最小間隔
xAxis.setGranularity(1f);
//設(shè)置X軸的刻度數(shù)量，第二個參數(shù)為true,將會畫出明確數(shù)量（帶有小數(shù)點）买喧，但是可能值導(dǎo)致不均勻捻悯，默認（6，false）
xAxis.setLabelCount(list.size() / 6, false);
//設(shè)置X軸的值（最小值淤毛、最大值今缚、然后會根據(jù)設(shè)置的刻度數(shù)量自動分配刻度顯示）
xAxis.setAxisMinimum(0f);
xAxis.setAxisMaximum((float) list.size());
//不顯示網(wǎng)格線
xAxis.setDrawGridLines(false);
// 標簽傾斜
xAxis.setLabelRotationAngle(45);
//設(shè)置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(jié)軸
YAxis yAxis = lineChart.getAxisLeft();
YAxis rightYAxis = lineChart.getAxisRight();
//設(shè)置Y軸是否顯示
rightYAxis.setEnabled(false); //右側(cè)Y軸不顯示
//設(shè)置y軸坐標之間的最小間隔
//不顯示網(wǎng)格線
yAxis.setDrawGridLines(false);
//設(shè)置Y軸坐標之間的最小間隔
yAxis.setGranularity(1);
//設(shè)置y軸的刻度數(shù)量
//+2：最大值n就有n+1個刻度，在加上y軸多一個單位長度低淡，為了好看姓言，so+2
yAxis.setLabelCount(Collections.max(list) + 2, false);
//設(shè)置從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);
//設(shè)置數(shù)據(jù)
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);
}
//顯示的內(nèi)容
@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();
}
}
注意的點
- 當(dāng)圖表放在scrollview或者listview中蔗蹋，會發(fā)現(xiàn)上下不能縮放事期，出現(xiàn)滑動沖突，解決方法如下
//解決滑動沖突
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);//設(shè)置數(shù)據(jù)
這個方法一定要放在最后
