Android圖表控制元件MPAndroidChart的簡單介紹(MPAndroidChart3.0)
阿新 • • 發佈:2019-01-04
每個類對應的圖是什麼github上有詳細的介紹圖表類具有相同的地方X軸:XAxisY軸:YAxis圖例:Legend描述:Description限制線:LimitLine選中圖表中的值,可顯示的檢視:MarkerView 具體在圖表中的表現如下圖
以曲線圖為例依賴:project
一.XAxis(X軸)1.得到X軸:
4.設定X軸的刻度數量
如上面的圖所示,Y軸總會高出X軸一點,並沒有從0點開始,因此需要對Y軸進行設定Y軸和X軸類似1.得到Y軸
五.MarkerViewMarkerView可自定義,用於點選圖示值時顯示想要的內容 效果如上右圖1.自定義MarkerView
柱狀圖,餅狀圖,組合圖等等,用法類似,方法很多,無法列舉,遇見問題時多看官方文件在附一下地址
以曲線圖為例依賴:project
build.gradle 中
allprojects {
repositories {
jcenter()
maven { url "https://jitpack.io" }
}
}
app build.gradle 中
compile 'com.github.PhilJay:MPAndroidChart:v3.0.2'最簡單的程式碼
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.github.mikephil.charting.charts.LineChart android:id="@+id/lineChart" android:layout_width="match_parent"android:layout_height="300dp" android:layout_centerInParent="true"/> </RelativeLayout>
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); LineChart mLineChart = (LineChart) findViewById(R.id.lineChart); //顯示邊界效果圖:mLineChart.setDrawBorders(true); //設定資料 List<Entry> entries = new ArrayList<>(); for (int i = 0; i < 10; i++) { entries.add(new Entry(i, (float) (Math.random()) * 80)); } //一個LineDataSet就是一條線 LineDataSet lineDataSet = new LineDataSet(entries, "溫度"); LineData data = new LineData(lineDataSet); mLineChart.setData(data); }
一.XAxis(X軸)1.得到X軸:
XAxis xAxis = mLineChart.getXAxis();
2.設定X軸的位置(預設在上方):xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//值:BOTTOM,BOTH_SIDED,BOTTOM_INSIDE,TOP,TOP_INSIDE3.設定X軸座標之間的最小間隔(因為此圖有縮放功能,X軸,Y軸可設定可縮放)
xAxis.setGranularity(1f);對比圖:左圖X軸在圖縮放時值的間隔會按比例改變,而右圖進行設定後,最小間隔始終為1
4.設定X軸的刻度數量
xAxis.setLabelCount(12, true);第二個引數表示是否平均分配 如果為true則按比例分為12個點、如果為false則適配X刻度的值來分配點,可能沒有12個點。對比圖:左圖的引數為true,右圖的引數為false5.設定X軸的值(最小值、最大值、然後會根據設定的刻度數量自動分配刻度顯示)
xAxis.setAxisMinimum(0f); xAxis.setAxisMaximum(20f);前面是的X軸是根據(X,Y)的值預設顯示的X軸,現在才是真正的設定規定的值效果圖:6.設定X軸值為字串(如上右圖)
xAxis.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float value, AxisBase axis) { return mList.get((int) value); //mList為存有月份的集合 } });想要顯示完整的12個月份,要與(x,y)座標對應數量 10 改成 12
for (int i = 0; i < 12; i++) { entries.add(new Entry(i, (float) (Math.random()) * 80)); }還有設定線條顏色、字型顏色、等等,可檢視詳細的文件。7.取消曲線顯示的值為整數與設定自定義X軸類似,設定曲線顯示值為整數,可在設定曲線LineDataSet 時,修改值的型別
lineDataSet.setValueFormatter(new IValueFormatter() { @Override public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) { int IValue = (int) value; return String.valueOf(IValue); } });二.YAxis(Y軸)
如上面的圖所示,Y軸總會高出X軸一點,並沒有從0點開始,因此需要對Y軸進行設定Y軸和X軸類似1.得到Y軸
YAxis leftYAxis = mLineChart.getAxisLeft(); YAxis rightYAxis = mLineChart.getAxisRight();2.設定從Y軸值
leftYAxis.setAxisMinimum(0f); leftYAxis.setAxisMaximum(100f); rightYAxis.setAxisMinimum(0f); rightYAxis.setAxisMaximum(100f);以及
leftYAxis.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float value, AxisBase axis) { return (int) value + "%"; } });效果圖:3.設定Y軸是否顯示(效果如上右圖)
rightYAxis.setEnabled(false); //右側Y軸不顯示4.X軸和Y軸類似,都具有相同的屬性方法
rightYAxis.setGranularity(1f); rightYAxis.setLabelCount(11,false); rightYAxis.setTextColor(Color.BLUE); //文字顏色 rightYAxis.setGridColor(Color.RED); //網格線顏色 rightYAxis.setAxisLineColor(Color.GREEN); //Y軸顏色5.限制線LimitLine(如上右圖)
LimitLine limitLine = new LimitLine(95,"高限制性"); //得到限制線 limitLine.setLineWidth(4f); //寬度 limitLine.setTextSize(10f); limitLine.setTextColor(Color.RED); //顏色 limitLine.setLineColor(Color.BLUE); rightYAxis.addLimitLine(limitLine); //Y軸新增限制線三.Legend(圖例:即上圖所示的曲線圖下面的 溫度)1.得到Lengend
Legend legend = mLineChart.getLegend();2.設定Lengend位置
legend.setTextColor(Color.CYAN); //設定Legend 文字顏色 legend.setVerticalAlignment(Legend.LegendVerticalAlignment.BOTTOM); legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER); legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);3.設定標籤是否換行(當多條標籤時 需要換行顯示、如上右圖)true:可換行。false:不換行
legend.setWordWrapEnabled(true);4.隱藏Lengend
legend.setEnabled(false);如下圖所示四.Description(描述)1.隱藏描述
Description description = new Description(); description.setEnabled(false); mLineChart.setDescription(description);2.設定描述內容
Description description = new Description(); description.setText("X軸描述"); description.setTextColor(Color.RED); mLineChart.setDescription(description);
五.MarkerViewMarkerView可自定義,用於點選圖示值時顯示想要的內容 效果如上右圖1.自定義MarkerView
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.format(e.getY())); super.refreshContent(e, highlight); } @Override public MPPointF getOffset() { return new MPPointF(-(getWidth() / 2), -getHeight() - 10); } }2.設定顯示MarkerView
MyMarkerView mv = new MyMarkerView(this); mLineChart.setMarkerView(mv);折線圖的線條設定
//一個LineDataSet就是一條線 LineDataSet lineDataSet = new LineDataSet(entries, "溫度"); //設定曲線值的圓點是實心還是空心 lineDataSet.setDrawCircleHole(false); //設定顯示值的字型大小 lineDataSet.setValueTextSize(9f); //線模式為圓滑曲線(預設折線) lineDataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
柱狀圖,餅狀圖,組合圖等等,用法類似,方法很多,無法列舉,遇見問題時多看官方文件在附一下地址