MPChartAndroid使用講解

標籤：android   圖表 mpchartandroid   

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">    最的項目裡又要加更加複雜的圖表了，實在是不想在去自己實現了，就想找個第三方的開源圖表庫去實現，以前自己封裝過achartenginee這個apache的圖表引擎，但看到這個MPChartAndroid後，覺得 achartengine簡直是弱爆了。下面就先對比一下MPChartEnginee的優勢，及其使用。</span>

  MPChartEnginee的優點：1.更加美觀的外表，從官方給的各自的兩個Demo就可以看出，MPChartAndroid繪出來的圖表更加的柔和，美觀。

                                            2.更加完美的事件衝突處理，用過achartenginee的都知道，achartenginee在事件衝突的處理上真的不是十分完美，achartenginee做出來的圖表放到                                                ScrollView中，會導致ScrollView滑動不靈敏，而MPChartEnginee則不存在此問題，官方給出的demo就有在ListView中的圖表，有在ScrollView                                                   中的圖表，可以說對事件的處理可以算是完美。

                                            3.更加強大的可定製性，在學習和使用achartenginee時，發現圖表有很多屬性是沒有提供set方法去設定的，導致很多情況下，做出來的圖表不符合                                                實際需求，樣式特別的難看，而MPChartEnginee則幾乎對所有可見的屬性都提供了set方法，可以輕鬆的定製圖表外觀，這也是我轉而使用這個框                                                架的主要原因。

                                            4.強大的動畫特效，可以為我們的 App增色不少。（存在一點點bug,不是必現的）。

  基於以上幾點，我們以後可以放棄achartenginee等圖表架構，而全部使用MpChartEnginee了。下面就我對架構源碼的理解，首先講解一下源碼的組成結構。看下源碼結構      圖：

  

  源碼結構中，我們只要重點關注chart包，components包，data，listener包和animation包即可。其中，chart包中定義了所有可以繪製的圖表種類，主要用來繪製圖表的整體屬性，定義事件處理等，data包中定義了不同圖表所需要的不同資料類型，components包中定義了所有chart相關的組件定義，listener中則定義了與使用者的事件互動處理。

   官方Demo講解：   

package com.xxmassdeveloper.mpchartexample;public class LineChartActivity1 extends DemoBase{private LineChart mChart;@Overrideprotected void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_linechart);mChart = (LineChart) findViewById(R.id.chart1);mChart.setDescription("");    //設定圖表描述資訊mChart.setScaleEnabled(false); //設定圖表是否可縮放mChart.setBackgroundColor(Color.WHITE); //設定圖表背景顏色mChart.setDrawGridBackground(false);  //設定是否顯示表格XAxis xAxis = mChart.getXAxis();     //得到圖表的X軸執行個體xAxis.setPosition(XAxisPosition.BOTTOM);//設定X軸的顯示位置xAxis.setDrawGridLines(false);  //設定是否顯示X軸表格xAxis.setAvoidFirstLastClipping(true); //設定x軸起點和終點label不超出螢幕xAxis.setDrawAxisLine(true);           //設定顯示x軸xAxis.setSpaceBetweenLabels(0); // 設定x軸label不間隔YAxis leftAxis = mChart.getAxisLeft();  //得到圖表的左側Y軸執行個體leftAxis.setAxisMaxValue(3.4482f); // 設定Y軸最大值leftAxis.setAxisMinValue(3.1872f);// 設定Y軸最小值。leftAxis.setStartAtZero(false);   //設定圖表起點從0開始leftAxis.enableGridDashedLine(10f, 10f, 0f); //設定橫向表格為虛線                 // limit lines are drawn behind data (and not on top)leftAxis.setDrawLimitLinesBehindData(true);mChart.getAxisRight().setEnabled(false); //設定右側Y軸不可用（這裡可以向得到左側Y軸那樣，得到右側Y軸執行個體去處理）                // YAxis rightAxis = mChart.getAxisRight();

                // rightAxis.setTextSize();

                // rightAxis.setTextColor();等一系列的設定

                // add data

setData(7, 3);// mChart.setVisibleXRange(5, AxisDependency.LEFT);// mChart.setVisibleYRangeMaximum(5f, AxisDependency.LEFT);// dont forget to refresh the drawingmChart.invalidate();}@Overridepublic boolean onCreateOptionsMenu(Menu menu){getMenuInflater().inflate(R.menu.line, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item){switch (item.getItemId()){case R.id.actionToggleValues:{for (DataSet<?> set : mChart.getData().getDataSets())set.setDrawValues(!set.isDrawValuesEnabled());mChart.invalidate();break;}case R.id.actionToggleHighlight:{if (mChart.isHighlightEnabled())mChart.setHighlightEnabled(false);else mChart.setHighlightEnabled(true);mChart.invalidate();break;}case R.id.actionToggleFilled:{ArrayList<LineDataSet> sets = (ArrayList<LineDataSet>) mChart.getData().getDataSets();for (LineDataSet set : sets){if (set.isDrawFilledEnabled())set.setDrawFilled(false);else set.setDrawFilled(true);}mChart.invalidate();break;}case R.id.actionToggleCircles:{ArrayList<LineDataSet> sets = (ArrayList<LineDataSet>) mChart.getData().getDataSets();for (LineDataSet set : sets){if (set.isDrawCirclesEnabled())set.setDrawCircles(false);else set.setDrawCircles(true);}mChart.invalidate();break;}case R.id.actionToggleCubic:{ArrayList<LineDataSet> sets = (ArrayList<LineDataSet>) mChart.getData().getDataSets();for (LineDataSet set : sets){if (set.isDrawCubicEnabled())set.setDrawCubic(false);else set.setDrawCubic(true);}mChart.invalidate();break;}case R.id.actionToggleStartzero:{mChart.getAxisLeft().setStartAtZero(!mChart.getAxisLeft().isStartAtZeroEnabled());mChart.getAxisRight().setStartAtZero(!mChart.getAxisRight().isStartAtZeroEnabled());mChart.invalidate();break;}case R.id.actionTogglePinch:{if (mChart.isPinchZoomEnabled())mChart.setPinchZoom(false);else mChart.setPinchZoom(true);mChart.invalidate();break;}case R.id.actionToggleAutoScaleMinMax:{mChart.setAutoScaleMinMaxEnabled(!mChart.isAutoScaleMinMaxEnabled());mChart.notifyDataSetChanged();break;}case R.id.animateX:{mChart.animateX(3000);break;}case R.id.animateY:{mChart.animateY(3000, Easing.EasingOption.EaseInCubic);break;}case R.id.animateXY:{mChart.animateXY(3000, 3000);break;}case R.id.actionToggleFilter:{// the angle of filtering is 35°Approximator a = new Approximator(ApproximatorType.DOUGLAS_PEUCKER, 35);if (!mChart.isFilteringEnabled()){mChart.enableFiltering(a);}else{mChart.disableFiltering();}mChart.invalidate();//// for(int i = 0; i < 10; i++) {// mChart.addEntry(new Entry((float) (Math.random() * 100),// i+2), 0);// mChart.invalidate();// }//// Toast.makeText(getApplicationContext(), "valcount: " +// mChart.getDataOriginal().getYValCount() + ", valsum: " +// mChart.getDataOriginal().getYValueSum(),// Toast.LENGTH_SHORT).show();//break;}case R.id.actionSave:{if (mChart.saveToPath("title" + System.currentTimeMillis(), "")){Toast.makeText(getApplicationContext(), "Saving SUCCESSFUL!", Toast.LENGTH_SHORT).show();}else Toast.makeText(getApplicationContext(), "Saving FAILED!", Toast.LENGTH_SHORT).show();// mChart.saveToGallery("title"+System.currentTimeMillis())break;}}return true;}private void setData(int count, float range){ArrayList<String> xVals = new ArrayList<String>();ArrayList<Entry> yVals = new ArrayList<Entry>();for (int i = 0; i < count; i++){xVals.add((i % 30) + "/" + (i % 12) + "/14");yVals.add(new Entry((float) (Math.random() * 4), i));}// create a dataset and give it a typeLineDataSet set1 = new LineDataSet(yVals, "DataSet 1");set1.setLineWidth(1.5f);set1.setCircleSize(4f);set1.setCircleColor(Color.parseColor("#fd4634"));// create a data object with the datasetsLineData data = new LineData(xVals, set1);// set datamChart.setData(data);}}

   

   

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

MPChartAndroid使用講解