開源圖表庫MPAndroidChart使用介紹之餅狀圖&折線圖&柱狀圖，圖表mpandroidchart

開源圖表庫MPAndroidChart使用介紹之餅狀圖&折線圖&柱狀圖，圖表mpandroidchart

MPAndroidChart開源圖表庫之餅狀圖

　　為大家介紹一款表徵圖開源庫MPAndroidChart,它不僅可以在Android裝置上繪製各種統計圖表，而且可以對圖表進行拖動和縮放操作，用起來非常靈活。MPAndroidChart同樣擁有常用的圖表類型：線型圖、餅圖、柱狀圖和散佈圖。

mpandroidchartlibrary.jar包：
https://github.com/PhilJay/MPAndroidChart/releases

　　下面主要實現以下餅狀圖：

　　1.從上面的地址中下載最新mpandroidchartlibrary-2-0-8.jar包， 然後copy到項目的libs中

　　2. 定義xml檔案

3.  主要Java邏輯代碼如下。

importjava.util.ArrayList;  importcom.github.mikephil.charting.charts.PieChart;  importcom.github.mikephil.charting.components.Legend;  importcom.github.mikephil.charting.components.Legend.LegendPosition;  importcom.github.mikephil.charting.data.Entry;  importcom.github.mikephil.charting.data.PieData;  importcom.github.mikephil.charting.data.PieDataSet;  import android.support.v7.app.ActionBarActivity;  importandroid.graphics.Color;  importandroid.os.Bundle;  importandroid.util.DisplayMetrics;  public class MainActivity extends ActionBarActivity {  privatePieChartmChart;      @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  mChart = (PieChart) findViewById(R.id.spread_pie_chart);  PieDatamPieData = getPieData(4, 100);  showChart(mChart, mPieData);      }  private void showChart(PieChartpieChart, PieDatapieData) {  pieChart.setHoleColorTransparent(true);  pieChart.setHoleRadius(60f);  //半徑pieChart.setTransparentCircleRadius(64f); // 半透明圈        //pieChart.setHoleRadius(0)  //實心圓pieChart.setDescription("測試餅狀圖");          // mChart.setDrawYValues(true);  pieChart.setDrawCenterText(true);  //餅狀圖中間可以添加文字pieChart.setDrawHoleEnabled(true);  pieChart.setRotationAngle(90); // 初始旋轉角度        // draws the corresponding description value into the slice          // mChart.setDrawXValues(true);          // enable rotation of the chart by touch  pieChart.setRotationEnabled(true); // 可以手動旋轉        // display percentage values  pieChart.setUsePercentValues(true);  //顯示成百分比        // mChart.setUnit(" €");          // mChart.setDrawUnitsInChart(true);          // add a selection listener  //      mChart.setOnChartValueSelectedListener(this);          // mChart.setTouchEnabled(false);  //      mChart.setOnAnimationListener(this);  pieChart.setCenterText("Quarterly Revenue");  //餅狀圖中間的文字        //設定資料pieChart.setData(pieData);           // undo all highlights  //      pieChart.highlightValues(null);  //      pieChart.invalidate();          Legend mLegend = pieChart.getLegend();  //設定比例圖mLegend.setPosition(LegendPosition.RIGHT_OF_CHART);  //最右邊顯示//      mLegend.setForm(LegendForm.LINE);  //設定比例圖的形狀，預設是方形mLegend.setXEntrySpace(7f);  mLegend.setYEntrySpace(5f);  pieChart.animateXY(1000, 1000);  //設定動畫        // mChart.spin(2000, 0, 360);      }      /**      *       * @param count 分成幾部分     * @param range      */  privatePieDatagetPieData(int count, float range) {  ArrayList<String>xValues = new ArrayList<String>();  //xVals用來表示每個餅塊上的內容for (inti = 0; i< count; i++) {  xValues.add("Quarterly" + (i + 1));  //餅塊上顯示成Quarterly1, Quarterly2, Quarterly3, Quarterly4          }  ArrayList<Entry>yValues = new ArrayList<Entry>();  //yVals用來表示封裝每個餅塊的實際資料        // 餅圖資料        /**          * 將一個餅形圖分成四部分，四部分的數值比例為14:14:34:38          * 所以 14代表的百分比就是14%           */  float quarterly1 = 14;  float quarterly2 = 14;  float quarterly3 = 34;  float quarterly4 = 38;  yValues.add(new Entry(quarterly1, 0));  yValues.add(new Entry(quarterly2, 1));  yValues.add(new Entry(quarterly3, 2));  yValues.add(new Entry(quarterly4, 3));          //y軸的集合PieDataSetpieDataSet = new PieDataSet(yValues, "Quarterly Revenue 2014"/*顯示在比例圖上*/);  pieDataSet.setSliceSpace(0f); //設定個餅狀圖之間的距離ArrayList<Integer> colors = new ArrayList<Integer>();          // 餅圖顏色colors.add(Color.rgb(205, 205, 205));  colors.add(Color.rgb(114, 188, 223));  colors.add(Color.rgb(255, 123, 124));  colors.add(Color.rgb(57, 135, 200));  pieDataSet.setColors(colors);  DisplayMetrics metrics = getResources().getDisplayMetrics();  floatpx = 5 * (metrics.densityDpi / 160f);  pieDataSet.setSelectionShift(px); // 選中態多出的長度PieDatapieData = new PieData(xValues, pieDataSet);  returnpieData;      }  }

如下：

MPAndroidChart開源圖表庫之折線圖

1. 將mpandroidchartlibrary-2-0-8.jar包copy到項目的libs中

2. 定義xml檔案

 

3.  主要Java邏輯代碼如下。

packagecom.example.mpandroidlinechart;  importjava.util.ArrayList;  importcom.github.mikephil.charting.charts.LineChart;  importcom.github.mikephil.charting.components.Legend;  importcom.github.mikephil.charting.components.Legend.LegendForm;  importcom.github.mikephil.charting.data.Entry;  importcom.github.mikephil.charting.data.LineData;  importcom.github.mikephil.charting.data.LineDataSet;  import android.support.v7.app.ActionBarActivity;  importandroid.graphics.Color;  importandroid.os.Bundle;  public class MainActivity extends ActionBarActivity {  privateLineChartmLineChart;  //  private Typeface mTf;      @Override  protected void onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);  mLineChart = (LineChart) findViewById(R.id.spread_line_chart);  //      mTf = Typeface.createFromAsset(getAssets(), "OpenSans-Bold.ttf");  LineDatamLineData = getLineData(36, 100);  showChart(mLineChart, mLineData, Color.rgb(114, 188, 223));      }      // 設定顯示的樣式private void showChart(LineChartlineChart, LineDatalineData, int color) {  lineChart.setDrawBorders(false);  //是否在折線圖上添加邊框        // no description text  lineChart.setDescription("");// 資料描述        // 如果沒有資料的時候，會顯示這個，類似listview的emtpyviewlineChart.setNoDataTextDescription("You need to provide data for the chart.");          // enable / disable grid background  lineChart.setDrawGridBackground(false); // 是否顯示表格顏色lineChart.setGridBackgroundColor(Color.WHITE& 0x70FFFFFF); // 表格的的顏色，在這裡是是給顏色設定一個透明度        // enable touch gestures  lineChart.setTouchEnabled(true); // 設定是否可以觸摸        // enable scaling and dragging  lineChart.setDragEnabled(true);// 是否可以拖拽lineChart.setScaleEnabled(true);// 是否可以縮放        // if disabled, scaling can be done on x- and y-axis separately  lineChart.setPinchZoom(false);//   lineChart.setBackgroundColor(color);// 設定背景        // add data  lineChart.setData(lineData); // 設定資料        // get the legend (only possible after setting data)          Legend mLegend = lineChart.getLegend(); // 設定比例表徵圖示，就是那個一組y的value的        // modify the legend ...        // mLegend.setPosition(LegendPosition.LEFT_OF_CHART);  mLegend.setForm(LegendForm.CIRCLE);// 樣式mLegend.setFormSize(6f);// 字型mLegend.setTextColor(Color.WHITE);// 顏色//      mLegend.setTypeface(mTf);// 字型lineChart.animateX(2500); // 立即執行的動畫,x軸      }      /**      * 產生一個資料     * @param count 表示圖表中有多少個座標點     * @param range 用來產生range以內的隨機數     * @return      */  privateLineDatagetLineData(int count, float range) {  ArrayList<String>xValues = new ArrayList<String>();  for (inti = 0; i< count; i++) {              // x軸顯示的資料，這裡預設使用數字下標顯示xValues.add("" + i);          }          // y軸的資料ArrayList<Entry>yValues = new ArrayList<Entry>();  for (inti = 0; i< count; i++) {  float value = (float) (Math.random() * range) + 3;  yValues.add(new Entry(value, i));          }          // create a dataset and give it a type          // y軸的資料集合LineDataSetlineDataSet = new LineDataSet(yValues, "測試折線圖" /*顯示在比例圖上*/);          // mLineDataSet.setFillAlpha(110);          // mLineDataSet.setFillColor(Color.RED);          //用y軸的集合來設定參數lineDataSet.setLineWidth(1.75f); // 線寬lineDataSet.setCircleSize(3f);// 顯示的圓形大小lineDataSet.setColor(Color.WHITE);// 顯示顏色lineDataSet.setCircleColor(Color.WHITE);// 圓形的顏色lineDataSet.setHighLightColor(Color.WHITE); // 高亮的線的顏色ArrayList<LineDataSet>lineDataSets = new ArrayList<LineDataSet>();  lineDataSets.add(lineDataSet); // add the datasets          // create a data object with the datasets  LineDatalineData = new LineData(xValues, lineDataSets);  returnlineData;      }  }

 如下：

MPAndroidChart開源圖表庫之柱狀圖

1. 將mpandroidchartlibrary-2-0-8.jar包copy到項目的libs中

2. 定義xml檔案

 

　　3.  主要Java邏輯代碼如下。

packagecom.jackie.mpandoidbarchart;importjava.util.ArrayList;importcom.github.mikephil.charting.charts.BarChart;importcom.github.mikephil.charting.charts.LineChart;importcom.github.mikephil.charting.components.Legend;importcom.github.mikephil.charting.components.Legend.LegendForm;importcom.github.mikephil.charting.components.XAxis;importcom.github.mikephil.charting.components.XAxis.XAxisPosition;importcom.github.mikephil.charting.data.BarData;importcom.github.mikephil.charting.data.BarDataSet;importcom.github.mikephil.charting.data.BarEntry;import android.support.v7.app.ActionBarActivity;importandroid.graphics.Color;importandroid.os.Bundle;public class MainActivity extends ActionBarActivity {    privateBarChartmBarChart;    privateBarDatamBarData;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);                mBarChart = (BarChart) findViewById(R.id.spread_bar_chart);        mBarData = getBarData(4, 100);        showBarChart(mBarChart, mBarData);    }        private void showBarChart(BarChartbarChart, BarDatabarData) {        barChart.setDrawBorders(false);  ////是否在折線圖上添加邊框            barChart.setDescription("");// 資料描述                // 如果沒有資料的時候，會顯示這個，類似ListView的EmptyView        barChart.setNoDataTextDescription("You need to provide data for the chart.");            barChart.setDrawGridBackground(false); // 是否顯示表格顏色        barChart.setGridBackgroundColor(Color.WHITE& 0x70FFFFFF); // 表格的的顏色，在這裡是是給顏色設定一個透明度        barChart.setTouchEnabled(true); // 設定是否可以觸摸        barChart.setDragEnabled(true);// 是否可以拖拽        barChart.setScaleEnabled(true);// 是否可以縮放        barChart.setPinchZoom(false);//     //        barChart.setBackgroundColor();// 設定背景                barChart.setDrawBarShadow(true);        barChart.setData(barData); // 設定資料        Legend mLegend = barChart.getLegend(); // 設定比例表徵圖示mLegend.setForm(LegendForm.CIRCLE);// 樣式mLegend.setFormSize(6f);// 字型mLegend.setTextColor(Color.BLACK);// 顏色//      X軸設定//      XAxisxAxis = barChart.getXAxis();//      xAxis.setPosition(XAxisPosition.BOTTOM);barChart.animateX(2500); // 立即執行的動畫,x軸        }    privateBarDatagetBarData(int count, float range) {        ArrayList<String>xValues = new ArrayList<String>();        for (inti = 0; i< count; i++) {            xValues.add("第" + (i + 1) + "季度");        }                ArrayList<BarEntry>yValues = new ArrayList<BarEntry>();        for (inti = 0; i< count; i++) {                float value = (float) (Math.random() * range/*100以內的隨機數*/) + 3;yValues.add(new BarEntry(value, i));            }                // y軸的資料集合BarDataSetbarDataSet = new BarDataSet(yValues, "測試餅狀圖"); barDataSet.setColor(Color.rgb(114, 188, 223));ArrayList<BarDataSet>barDataSets = new ArrayList<BarDataSet>();    barDataSets.add(barDataSet); // add the datasets    BarDatabarData = new BarData(xValues, barDataSets);                returnbarData;    }}

如下：

 

 

作者：傑瑞教育
出處：http://www.cnblogs.com/jerehedu/ 
著作權聲明：本文著作權歸煙台傑瑞教育科技有限公司和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文串連，否則保留追究法律責任的權利。
技術諮詢：