android MPChart表徵圖使用具體解釋

標籤：jsb   不同的   ase   圖表   mat   螢幕   資料   最小值   listen   

  近期項目裡有要加入更加複雜的表徵圖了，曾經一些簡單的曲線圖，餅狀圖。風險指示圖等，都是自己畫。隨著難度的添加。越來越力不從心。曾經研究過achartenginee表徵圖架構，但發現achartenginee的可定製性實在不敢恭維，做出來的表徵圖根本不能滿足需求。所以又在github上搜尋android chart,發現了排第一的這款表徵圖架構。大概預計了一下，是符合自己的要求的，於是down下來。研究研究，確實要比其它已知的架構強大。特此，總結一下其使用方法。

   MPChart架構的長處：1.簡單易用，全部的表徵圖都能夠當做一個普通的View在我們的布局檔案裡定義。與在布局中定義一個TextView沒有不論什麼的差別，使用也基本一樣，通過fandViewById()就可以。然後向chart中加入資料就可以。

                                           2.完好的事件衝突處理。在使用achartenginee時，發現圖表一旦放在ScrollView中，則會產生事件衝突，導致ScrollView滑動不靈敏，而MPChart在事件處理上堪稱完美。不僅在ScrollView中不會引起不論什麼事件衝突，並且圖表還能夠誇張的放在LIstView，ViewPager中。不要太強大啊。

                                           3.強大的可定製性，僅僅要是你能看到的。就能夠改動為你想要的樣式，這一點是我選擇它的主要長處。

                                           4.一句話就可實現的動畫效果，但有點小bug.但作者還在不停的更新。

   基於以上幾點，我們基本能夠抱起其它的圖表架構而一心使用MPChart就可以，以下先看一下原始碼demo的，以及我自己定製的一個曲線圖：

  

                               

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" height="474" width="373" >

                            

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" height="463" width="413" >

    效果簡直不談啊，太強大了，必須學會使用啊。

    以下講一下我對其代碼結構的理解：

    1.原始碼charts包中定義了全部能夠繪製的表徵圖類型。包含曲線圖。餅狀圖，柱狀圖，散佈圖，以及混合圖。

chart主要處理圖表的互動事件。動畫，組件的繪製等。

    2.原始碼components包中定義了圖表中全部的組件，包含x軸(XAxis)，y軸(YAxis)。表頭(Lenged)，標識(MarkerView).

    3.原始碼data包中則是不同類型的圖表須要不同的資料類型。

    4.原始碼listener包中定義了全部的事件類型。

     這幾個包是我們須要知道的，通過chart包中的隨意一個執行個體，能夠進行我們須要的不論什麼定製。比如：想要定製X軸的資料或者樣式。

     XAxis xAxis = mChart.getXAxis();

     xAxis.setPosition(); //定製X軸是在圖表上方還是下方。

     xAxis.setLabelsToSkip(); //定製X軸Label間隔。

     xAxis.setAvoidFirstLastClipping(); //定製X軸起點和終點Label不能超出螢幕。

     Y軸的操作類似。

     Lenged l = mChart.getLenged();

     l.setEnabled(); //定製表頭是否顯示。

     l.setForm();  //定製表頭樣式。是circle，square。還是line

     等等，僅僅要是你能看到的樣式，都能夠定製。你沒看到的也能夠定製。以下列貼出第一個我定製的圖的原始碼：

                lineView = new LineChart(this);lineView.setDescription("");lineView.setScaleEnabled(false);lineView.getAxisRight().setEnabled(true);lineView.setDrawGridBackground(false);lineView.setTouchEnabled(false); //設定圖表滑動是否可用lineView.getLegend().setEnabled(false); //設定表頭不可用lineView.setHardwareAccelerationEnabled(true);ArrayList<Entry> yRawData = new ArrayList<Entry>();ArrayList<String> xRawDatas = new ArrayList<String>();int index = 0;for (int i = array.length() - 1; i >= 0; i--){if (array.get(i) != null){JSONObject jsonObj = (JSONObject) array.get(i);yRawData.add(new Entry(Float.parseFloat(jsonObj.optString("profitRate")), index));xRawDatas.add(DateFormatHelp.formatDateToNeededFormat(jsonObj.optString("dt").concat("000"),DateFormat.DATE_1));index++;initMaxMin(Float.parseFloat(jsonObj.optString("profitRate")));}}/** * x軸樣式設定 */XAxis xAxis = lineView.getXAxis();xAxis.setPosition(XAxisPosition.BOTTOM);// 設定x軸在底部顯示xAxis.setAvoidFirstLastClipping(true);xAxis.setSpaceBetweenLabels(0); // x軸間距xAxis.setTextColor(resource.getColor(R.color.grey_low_txt));xAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd));xAxis.setDrawGridLines(true);//設定是否顯示橫軸表格xAxis.setGridColor(resource.getColor(R.color.color_dddddd));//設定x軸表格顏色/** * y軸樣式設定 */YAxis leftAxis = lineView.getAxisLeft();leftAxis.setStartAtZero(false);leftAxis.setLabelCount(yAxislabelNum, true);  //設定Y軸Label數量leftAxis.setDrawLimitLinesBehindData(true);   leftAxis.setTextColor(resource.getColor(R.color.grey_low_txt)); //設定左側Y軸Label顏色leftAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd)); //設定左側Y軸顏色leftAxis.setDrawGridLines(true); //設定顯示Y軸表格線leftAxis.setGridColor(resource.getColor(R.color.color_dddddd)); //設定Y軸表格線顏色leftAxis.setAxisMaxValue(yAxisMax + yAxisGap); // 設定Y軸最大值leftAxis.setAxisMinValue(yAxisMin - yAxisGap);// 設定Y軸最小值YAxis rightAxis = lineView.getAxisRight();rightAxis.setDrawLabels(false);   //設定右側Y軸是否顯示 LabelrightAxis.setDrawGridLines(false);rightAxis.setAxisLineColor(resource.getColor(R.color.color_dddddd));/** * 曲線樣式設定 */LineDataSet set = new LineDataSet(yRawData, "");set.setDrawCubic(true);  //設定曲線樣式為cubieset.setCubicIntensity(0.2f);//置曲線順滑度set.setLineWidth(Util.dip2px(this, 1.0f)); //射置曲線widthset.setColor(resource.getColor(R.color.color_fd4634));//射置曲線顏色set.setCircleSize(Util.dip2px(this, 2.0f));//射置曲線上圓點大小set.setCircleColor(resource.getColor(R.color.color_fd4634));//射置曲線上圓點顏色set.setFillColor(resource.getColor(R.color.color_fd4634));//射置曲線填充顏色set.setFillAlpha(128);//射置曲線填充顏色透明度set.setDrawFilled(true);//設定曲線填沖是否啟用set.setDrawValues(false);//設定是否顯示點值LineData data = new LineData(xRawDatas, set);lineView.setData(data);//綁定資料到圖表lineView.invalidate();LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, Util.dip2px(this, 150));contentLayout.addView(lineView, params);

  學會使用這個圖表架構後。效率能夠大大的提高。普通的圖表需求也不用在操心了。。

。

 

android MPChart表徵圖使用具體解釋