MPchart使用詳解及詳細屬性(一)

MPchart使用詳解及詳細屬性(一)

專案原始碼:https://github.com/libin7278/MpChart

第一步 新增依賴或匯入Library

    dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:23.2.0'
compile 'com.github.PhilJay:MPAndroidChart:v2.2.3'
}

github:https://github.com/PhilJay/MPAndroidChart

第二步 佈局檔案

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:textSize="30sp"
android:textColor="#ff00ff"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="MPchartDemo"/>
<com.github.mikephil.charting.charts.BarChart
android:id="@ id/day_fragment_bar_chart"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@ id/seekBar1" />
</LinearLayout>

第三步 MainActivity程式碼

package com.tunshu.mydemo;
import android.app.Activity;
import android.os.Bundle;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import java.util.ArrayList;
public class MainActivity extends Activity {
private BarChart day_fragment_bar_chart;
private BarData mBarData;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
day_fragment_bar_chart= (BarChart) findViewById(R.id.day_fragment_bar_chart);
//getBarData(X軸座標個數, X所對應的值也就是Y值)
mBarData = getBarData(24, 10);
showBarChart(day_fragment_bar_chart, mBarData);
}
/**
*用來處理檢視的方法
*/
private void showBarChart(BarChart barChart, BarData barData) {
}
/**
*用來處理資料的方法
*/
private BarData getBarData(int count, float range) {
ArrayList<String> xValues = new ArrayList<String>();
for (int i = 0; i < count; i  ) {
xValues.add(i   "");
}
ArrayList<BarEntry> yValues = new ArrayList<BarEntry>();
for (int i = 0; i < count; i  ) {
float value = (float) (Math.random() * range/*100以內的隨機數*/)   3;
yValues.add(new BarEntry(value, i));
}
// y軸的資料集合
BarDataSet barDataSet = new BarDataSet(yValues, "collection");
ArrayList<BarDataSet> barDataSets = new ArrayList<BarDataSet>();
barDataSets.add(barDataSet); // add the datasets
BarData barData = new BarData(xValues, barDataSet);
return barData;
}
}

在MainActivity中已經封裝好了處理資料和檢視的方法;
這裡寫圖片描述

第四步 詳細屬性介紹

private void showBarChart(BarChart barChart, BarData barData) {
// 如果沒有資料的時候,會顯示這個,類似ListView的EmptyView
barChart.setNoDataTextDescription("You need to provide data for the chart.");
}

這裡寫圖片描述

private void showBarChart(BarChart barChart, BarData barData) {
barChart.setData(barData); // 設定資料
}

這裡寫圖片描述

barChart.setDrawBorders(true); //是否在折線圖上新增邊框

這裡寫圖片描述

barChart.setDescription("資料描述");// 資料描述
barChart.setDescriptionPosition(100,20);//資料描述的位置
barChart.setDescriptionColor(Color.GRAY);//資料的顏色
barChart.setDescriptionTextSize(40);//資料字型大小

如果此處不想要描述必須要設定 barChart.setDescription(“”);不然會顯示預設的 Description。
這裡寫圖片描述

barChart.setDrawGridBackground(true); // 是否顯示錶格顏色
barChart.setGridBackgroundColor(Color.RED); // 表格的的顏色

這裡寫圖片描述

barChart.setTouchEnabled(false); // 設定是否可以觸控
barChart.setDragEnabled(false);// 是否可以拖拽
barChart.setScaleEnabled(false);// 是否可以縮放
barChart.setPinchZoom(false);//y軸的值是否跟隨圖表變換縮放;如果禁止,y軸的值會跟隨圖表變換縮放
barChart.setBackgroundColor(Color.BLACK);// 設定整個圖表控制元件的背景

這裡寫圖片描述

 barChart.setDrawBarShadow(true);//柱狀圖沒有資料的部分是否顯示陰影效果

這裡寫圖片描述

barChart.setDrawValueAboveBar(false);//柱狀圖上面的數值是否在柱子上面

這裡寫圖片描述

//是否顯示豎直標尺線
barChart.getXAxis().setDrawGridLines(false);

這裡寫圖片描述
這裡寫圖片描述

//設定橫座標顯示的間隔數
barChart.getXAxis().setLabelsToSkip(4);

這裡寫圖片描述

//設定橫座標傾斜角度
barChart.getXAxis().setLabelRotationAngle(20);

這裡寫圖片描述

//設定橫座標之間的間隔距離 float值 
//不能與setLabelsToSkip()一起使用否則失效
barChart.getXAxis().setSpaceBetweenLabels(50);

這裡寫圖片描述

//是否顯示X軸數值
//預設是true
barChart.getXAxis().setDrawLabels(false);

這裡寫圖片描述

//右側是否顯示Y軸數值
barChart.getAxisRight().setDrawLabels(false);

這裡寫圖片描述

//是否顯示最右側豎線
barChart.getAxisRight().setEnabled(false);

這裡寫圖片描述

//自定義Y軸文字樣式
YAxisValueFormatter custom = new MyYAxisValueFormatter();
baChart.getAxisLeft().setValueFormatter(custom);
 public class MyYAxisValueFormatter implements YAxisValueFormatter {
private DecimalFormat mFormat;
public MyYAxisValueFormatter() {
mFormat = new DecimalFormat("###,###,###,##0");
}
@Override
public String getFormattedValue(float value, YAxis yAxis) {
return mFormat.format(value)   "K";
}
}

這裡寫圖片描述

//設定比例圖示的位置  barChart.getLegend().setPosition(Legend.LegendPosition.RIGHT_OF_CHART);
//設定比例圖示和文字之間的位置方向barChart.getLegend().setDirection(Legend.LegendDirection.RIGHT_TO_LEFT);
barChart.getLegend().setTextColor(Color.RED);

這裡寫圖片描述

//設定動畫
barChart.animateXY(2000,3000);
// y軸的資料集合
BarDataSet barDataSet = new BarDataSet(yValues, "collection");
barDataSet.setBarSpacePercent(80);
barDataSet.setVisible(true);//是否顯示柱狀圖柱子
barDataSet.setColor(Color.RED);//設定柱子顏色
barDataSet.setDrawValues(false);//是否顯示柱子上面的數值
package com.tunshu.mydemo;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import com.github.mikephil.charting.charts.BarChart;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.BarData;
import com.github.mikephil.charting.data.BarDataSet;
import com.github.mikephil.charting.data.BarEntry;
import com.github.mikephil.charting.formatter.YAxisValueFormatter;
import java.text.DecimalFormat;
import java.util.ArrayList;
public class MainActivity extends Activity {
private BarChart day_fragment_bar_chart;
private BarData mBarData;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
day_fragment_bar_chart= (BarChart) findViewById(R.id.day_fragment_bar_chart);
mBarData = getBarData(24, 10);
showBarChart(day_fragment_bar_chart, mBarData);
}
private void showBarChart(BarChart barChart, BarData barData) {
// 如果沒有資料的時候,會顯示這個,類似ListView的EmptyView
barChart.setNoDataTextDescription("You need to provide data for the chart.");
barChart.setData(barData); // 設定資料
barChart.setDrawBorders(false); //是否在折線圖上新增邊框
barChart.setDescription("資料描述");// 資料描述
barChart.setDescriptionPosition(100,20);//資料描述的位置
barChart.setDescriptionColor(Color.RED);//資料的顏色
barChart.setDescriptionTextSize(40);//資料字型大小
barChart.setDrawGridBackground(false); // 是否顯示錶格顏色
barChart.setGridBackgroundColor(Color.RED); // 表格的的顏色
//barChart.setBackgroundColor(Color.BLACK);// 設定整個圖示控制元件的背景
barChart.setDrawBarShadow(false);//柱狀圖沒有資料的部分是否顯示陰影效果
barChart.setTouchEnabled(false); // 設定是否可以觸控
barChart.setDragEnabled(false);// 是否可以拖拽
barChart.setScaleEnabled(false);// 是否可以縮放
barChart.setPinchZoom(false);//y軸的值是否跟隨圖表變換縮放;如果禁止,y軸的值會跟隨圖表變換縮放
barChart.setDrawValueAboveBar(true);//柱狀圖上面的數值顯示在柱子上面還是柱子裡面
barChart.getXAxis().setDrawGridLines(false);//是否顯示豎直標尺線
barChart.getXAxis().setLabelsToSkip(11);//設定橫座標顯示的間隔
//        barChart.getXAxis().setLabelRotationAngle(20);//設定橫座標傾斜角度
//        barChart.getXAxis().setSpaceBetweenLabels(50);
barChart.getXAxis().setDrawLabels(true);//是否顯示X軸數值
barChart.getXAxis().setPosition(XAxis.XAxisPosition.BOTTOM);//設定X軸的位置 預設在上方
barChart.getAxisRight().setDrawLabels(false);//右側是否顯示Y軸數值
barChart.getAxisRight().setEnabled(false);//是否顯示最右側豎線
barChart.getAxisRight().setDrawAxisLine(true);
barChart.getAxisLeft().setDrawAxisLine(false);
barChart.getXAxis().setDrawAxisLine(true);
YAxisValueFormatter custom = new MyYAxisValueFormatter();//自定義Y軸文字樣式
barChart.getAxisLeft().setValueFormatter(custom);
barChart.getLegend().setPosition(Legend.LegendPosition.RIGHT_OF_CHART);//設定比例圖示的位置
barChart.getLegend().setDirection(Legend.LegendDirection.RIGHT_TO_LEFT);//設定比例圖示和文字之間的位置方向
barChart.getLegend().setTextColor(Color.RED);
barChart.animateXY(2000,3000);
}
private BarData getBarData(int count, float range) {
ArrayList<String> xValues = new ArrayList<String>();
for (int i = 0; i < count; i  ) {
xValues.add(i   "");
}
ArrayList<BarEntry> yValues = new ArrayList<BarEntry>();
for (int i = 0; i < count; i  ) {
float value = (float) (Math.random() * range/*100以內的隨機數*/)   3;
yValues.add(new BarEntry(value, i));
}
// y軸的資料集合
BarDataSet barDataSet = new BarDataSet(yValues, "collection");
barDataSet.setBarSpacePercent(80);
barDataSet.setVisible(true);//是否顯示柱狀圖柱子
barDataSet.setColor(Color.RED);//設定柱子顏色
barDataSet.setDrawValues(false);//是否顯示柱子上面的數值
ArrayList<BarDataSet> barDataSets = new ArrayList<BarDataSet>();
barDataSets.add(barDataSet); // add the datasets
BarData barData = new BarData(xValues, barDataSet);
return barData;
}
public class MyYAxisValueFormatter implements YAxisValueFormatter {
private DecimalFormat mFormat;
public MyYAxisValueFormatter() {
mFormat = new DecimalFormat("###,###,###,##0");
}
@Override
public String getFormattedValue(float value, YAxis yAxis) {
return mFormat.format(value)   "K";
}
}
}

這裡寫圖片描述

//設定Y軸顯示數量
barChart.getAxisLeft().setLabelCount(2,false);

掃碼關注公眾號“偉大程式猿的誕生“,更多幹貨等著你~
掃碼關注公眾號“偉大程式猿的誕生“,更多幹貨等著你~
掃碼關注公眾號“偉大程式猿的誕生“,更多幹貨等著你~

公眾號回覆“資料獲取”,獲取更多幹貨哦~