MPAndroidChart 3.0——LineChart（折線圖）
顯示效果
MPAndroidChart每一種圖表的基本使用方式都基本相同 瞭解一種圖表的實現 參考項目源碼其餘的圖表也就差很少哩android
- 在佈局文件中定義
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#ffffff"
android:layout_margin="16dp"/>
2.綁定view 設置LineChart顯示屬性git
LineChart lineChart= (LineChart) findViewById(R.id.lineChart);
//建立描述信息
Description description =new Description();
description.setText("測試圖表");
description.setTextColor(Color.RED);
description.setTextSize(20);
lineChart.setDescription(description);//設置圖表描述信息
lineChart.setNoDataText("沒有數據熬");//沒有數據時顯示的文字
lineChart.setNoDataTextColor(Color.BLUE);//沒有數據時顯示文字的顏色
lineChart.setDrawGridBackground(false);//chart 繪圖區後面的背景矩形將繪製
lineChart.setDrawBorders(false);//禁止繪製圖表邊框的線
//lineChart.setBorderColor(); //設置 chart 邊框線的顏色。
//lineChart.setBorderWidth(); //設置 chart 邊界線的寬度，單位 dp。
//lineChart.setLogEnabled(true);//打印日誌
//lineChart.notifyDataSetChanged();//刷新數據
//lineChart.invalidate();//重繪
3.綁定數據github
/**
* Entry 座標點對象 構造函數 第一個參數爲x點座標 第二個爲y點
*/
ArrayList<Entry> values1 = new ArrayList<>();
ArrayList<Entry> values2 = new ArrayList<>();
values1.add(new Entry(4,10));
values1.add(new Entry(6,15));
values1.add(new Entry(9,20));
values1.add(new Entry(12,5));
values1.add(new Entry(15,30));
values2.add(new Entry(3,110));
values2.add(new Entry(6,115));
values2.add(new Entry(9,130));
values2.add(new Entry(12,85));
values2.add(new Entry(15,90));
//LineDataSet每個對象就是一條鏈接線
LineDataSet set1;
LineDataSet set2;
//判斷圖表中原來是否有數據
if (lineChart.getData() != null &&
lineChart.getData().getDataSetCount() > 0) {
//獲取數據1
set1 = (LineDataSet) lineChart.getData().getDataSetByIndex(0);
set1.setValues(values1);
set2= (LineDataSet) lineChart.getData().getDataSetByIndex(1);
set2.setValues(values2);
//刷新數據
lineChart.getData().notifyDataChanged();
lineChart.notifyDataSetChanged();
} else {
//設置數據1 參數1：數據源 參數2：圖例名稱
set1 = new LineDataSet(values1, "測試數據1");
set1.setColor(Color.BLACK);
set1.setCircleColor(Color.BLACK);
set1.setLineWidth(1f);//設置線寬
set1.setCircleRadius(3f);//設置焦點圓心的大小
set1.enableDashedHighlightLine(10f, 5f, 0f);//點擊後的高亮線的顯示樣式
set1.setHighlightLineWidth(2f);//設置點擊交點後顯示高亮線寬
set1.setHighlightEnabled(true);//是否禁用點擊高亮線
set1.setHighLightColor(Color.RED);//設置點擊交點後顯示交高亮線的顏色
set1.setValueTextSize(9f);//設置顯示值的文字大小
set1.setDrawFilled(false);//設置禁用範圍背景填充
//格式化顯示數據
final DecimalFormat mFormat = new DecimalFormat("###,###,##0");
set1.setValueFormatter(new IValueFormatter() {
@Override
public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
return mFormat.format(value);
}
});
if (Utils.getSDKInt() >= 18) {
// fill drawable only supported on api level 18 and above
Drawable drawable = ContextCompat.getDrawable(this, R.drawable.fade_red);
set1.setFillDrawable(drawable);//設置範圍背景填充
} else {
set1.setFillColor(Color.BLACK);
}
//設置數據2
set2=new LineDataSet(values2,"測試數據2");
set2.setColor(Color.GRAY);
set2.setCircleColor(Color.GRAY);
set2.setLineWidth(1f);
set2.setCircleRadius(3f);
set2.setValueTextSize(10f);
//保存LineDataSet集合
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
dataSets.add(set1); // add the datasets
dataSets.add(set2);
//建立LineData對象 屬於LineChart折線圖的數據集合
LineData data = new LineData(dataSets);
// 添加到圖表中
lineChart.setData(data);
//繪製圖表
lineChart.invalidate();
到這一步圖表就能夠顯示出來了 默認的效果表示不是很美麗 下面設置一下各類顯示效果
4.設置X軸的顯示效果api
//獲取此圖表的x軸
XAxis xAxis = lineChart.getXAxis();
xAxis.setEnabled(true);//設置軸啓用或禁用 若是禁用如下的設置所有不生效
xAxis.setDrawAxisLine(true);//是否繪製軸線
xAxis.setDrawGridLines(true);//設置x軸上每一個點對應的線
xAxis.setDrawLabels(true);//繪製標籤 指x軸上的對應數值
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//設置x軸的顯示位置
//xAxis.setTextSize(20f);//設置字體
//xAxis.setTextColor(Color.BLACK);//設置字體顏色
//設置豎線的顯示樣式爲虛線
//lineLength控制虛線段的長度
//spaceLength控制線之間的空間
xAxis.enableGridDashedLine(10f, 10f, 0f);
// xAxis.setAxisMinimum(0f);//設置x軸的最小值
// xAxis.setAxisMaximum(10f);//設置最大值
xAxis.setAvoidFirstLastClipping(true);//圖表將避免第一個和最後一個標籤條目被減掉在圖表或屏幕的邊緣
xAxis.setLabelRotationAngle(10f);//設置x軸標籤的旋轉角度
// 設置x軸顯示標籤數量 還有一個重載方法第二個參數爲布爾值強制設置數量 若是啓用會致使繪製點出現誤差
// xAxis.setLabelCount(10);
// xAxis.setTextColor(Color.BLUE);//設置軸標籤的顏色
// xAxis.setTextSize(24f);//設置軸標籤的大小
// xAxis.setGridLineWidth(10f);//設置豎線大小
// xAxis.setGridColor(Color.RED);//設置豎線顏色
// xAxis.setAxisLineColor(Color.GREEN);//設置x軸線顏色
// xAxis.setAxisLineWidth(5f);//設置x軸線寬度
// xAxis.setValueFormatter();//格式化x軸標籤顯示字符
5.設置Y軸的顯示效果 X軸與Y軸的經常使用屬性都差很少 不詳細舉例了數組
/**
* Y軸默認顯示左右兩個軸線
*/
//獲取右邊的軸線
YAxis rightAxis=lineChart.getAxisRight();
//設置圖表右邊的y軸禁用
rightAxis.setEnabled(false);
//獲取左邊的軸線
YAxis leftAxis = lineChart.getAxisLeft();
//設置網格線爲虛線效果
leftAxis.enableGridDashedLine(10f, 10f, 0f);
//是否繪製0所在的網格線
leftAxis.setDrawZeroLine(false);
6.設置與圖表交互tcp
lineChart.setTouchEnabled(true); // 設置是否能夠觸摸
lineChart.setDragEnabled(true);// 是否能夠拖拽
lineChart.setScaleEnabled(false);// 是否能夠縮放 x和y軸, 默認是true
lineChart.setScaleXEnabled(true); //是否能夠縮放 僅x軸
lineChart.setScaleYEnabled(true); //是否能夠縮放 僅y軸
lineChart.setPinchZoom(true); //設置x軸和y軸可否同時縮放。默認是否
lineChart.setDoubleTapToZoomEnabled(true);//設置是否能夠經過雙擊屏幕放大圖表。默認是true
lineChart.setHighlightPerDragEnabled(true);//可否拖拽高亮線(數據點與座標的提示線)，默認是true
lineChart.setDragDecelerationEnabled(true);//拖拽滾動時，手放開是否會持續滾動，默認是true（false是拖到哪是哪，true拖拽以後還會有緩衝）
lineChart.setDragDecelerationFrictionCoef(0.99f);//與上面那個屬性配合，持續滾動時的速度快慢，[0,1) 0表明當即中止。
7.設置圖例ide
Legend l = lineChart.getLegend();//圖例
l.setPosition(Legend.LegendPosition.RIGHT_OF_CHART_INSIDE);//設置圖例的位置
l.setTextSize(10f);//設置文字大小
l.setForm(Legend.LegendForm.CIRCLE);//正方形，圓形或線
l.setFormSize(10f); // 設置Form的大小
l.setWordWrapEnabled(true);//是否支持自動換行 目前只支持BelowChartLeft, BelowChartRight, BelowChartCenter
l.setFormLineWidth(10f);//設置Form的寬度
8.設置MarkView提示 點擊交點的小提示窗函數
//自定義的MarkerView對象
MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);
mv.setChartView(lineChart);
lineChart.setMarker(mv);
/**
*自定義MyMarkerView
*/
public class MyMarkerView extends MarkerView {
private TextView tvContent;
public MyMarkerView(Context context, int layoutResource) {
super(context, layoutResource);
tvContent= (TextView) findViewById(R.id.tvContent);
}
@Override
public void refreshContent(Entry e, Highlight highlight) {
if (e instanceof CandleEntry) {
CandleEntry ce = (CandleEntry) e;
tvContent.setText("" + Utils.formatNumber(ce.getHigh(), 0, true));
} else {
tvContent.setText("" + Utils.formatNumber(e.getY(), 0, true));
}
super.refreshContent(e, highlight);
}
@Override
public MPPointF getOffset() {
return new MPPointF(-(getWidth() / 2), -getHeight());
}
}
//佈局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="60dp"
android:layout_height="40dp"
android:background="@drawable/marker2"
android:layout_marginBottom="5dp">
<TextView
android:id="@+id/tvContent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_marginTop="7dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="5dp"
android:text=""
android:textSize="12dp"
android:textColor="@android:color/white"
android:ellipsize="end"
android:singleLine="true"
android:textAppearance="?android:attr/textAppearanceSmall" />
</RelativeLayout>
9.設置動畫佈局
// animateX(int durationMillis) : 水平軸動畫 在指定時間內 從左到右
// animateY(int durationMillis) : 垂直軸動畫 從下到上
// animateXY(int xDuration, int yDuration) : 兩個軸動畫，從左到右，從下到上
lineChart.animateXY(1000,1000);
在使用中遇到的問題
1.x軸自定義標籤的設置測試
在2點幾的版本中x軸的標籤是直接能夠經過LineData 的構造參數 傳一個string數組設置進去的 LineData data = new LineData(xVals, dataSets); 而最新的3版本看源碼彷佛把這個重載去掉了 我本身想了想 經過XY軸都帶有的格式化數據 判斷value值來進行標籤顯示的控制 不知道到什麼還有沒有其餘的方法
setValueFormatter X軸，Y軸以及LineDataSet都帶有此方法
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return null;
}
});
2.x軸默認的顯示數字顯示間隔
我想讓這裏1，2，3，4，5，6，7這樣的順序顯示 沒有找到一個很好的辦法 求指教
3.x軸默認顯示4個或是幾個標籤。。。。 xAxis.setLabelCount(10); 能夠設置標籤的顯示數量
參考連接
相關文章
- 1. MPAndroidChart的詳細使用——LineChart折線圖（二）
- 2. Swift - LineChart繪製折線圖
- 3. Android圖表 MPAndroidChart折線圖
- 4. MpAndroidChart-LineChart 折線圖使用（含動態添加點，動態添加曲線）
- 5. MPAndroidChart繪製折線圖
- 6. android雙曲線折線圖MPAndroidChart（一）
- 7. MPAndroidchart，折線圖LineChart自定義x軸，使x軸上的值與折線上的點對應
- 8. MPAndroidChart（柱狀圖，折線圖等繪製）
- 9. MPAndroidChart折線圖詳細使用（三）
- 10. Android圖表控件MPAndroidChart——曲線圖LineChart的使用（多條曲線）
- 更多相關文章...
- • R 繪圖 - 函數曲線圖 - R 語言教程
- • C# 多線程 - C#教程
- • 適用於PHP初學者的學習線路和建議
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. MPAndroidChart的詳細使用——LineChart折線圖（二）
- 2. Swift - LineChart繪製折線圖
- 3. Android圖表 MPAndroidChart折線圖
- 4. MpAndroidChart-LineChart 折線圖使用（含動態添加點，動態添加曲線）
- 5. MPAndroidChart繪製折線圖
- 6. android雙曲線折線圖MPAndroidChart（一）
- 7. MPAndroidchart，折線圖LineChart自定義x軸，使x軸上的值與折線上的點對應
- 8. MPAndroidChart（柱狀圖，折線圖等繪製）
- 9. MPAndroidChart折線圖詳細使用（三）
- 10. Android圖表控件MPAndroidChart——曲線圖LineChart的使用（多條曲線）