一圖勝千文，純粹的資料枯燥、無聊，讓人看不下去，改變一下形式，用圖表裝飾一下，立馬有趣多了。既然有這樣的外部需求，Android世界裡肯定要有圖表庫才行，今天解析的就是其中最強大的一個MPAndroidChart。

核心功能

• 支援以下圖表：
  • Line Chart（線圖）
  • Bar Chart（條形圖，又稱柱狀圖）
  • Combined Chart（組合圖：線性+條形）
  • Pie Chart（餅狀圖）
  • Scatter Chart（散點圖）
  • Bubble Chart（氣泡圖）
  • Stacked Bar Chart（堆積條形圖）
  • Candle Stick Chart（蠟燭圖）
  • Cubic Line Chart（立方擬合的折線圖）
  • Radar Chart（雷達圖）
  • Realtime Chart（實時折線圖）
  • Sinus Bar Chart（正弦柱狀圖）
• 支援以下操作和設定：
  • 支援x，y軸縮放
  • 支援拖拽
  • 支援手指滑動
  • 支援高亮顯示
  • 支援儲存圖表到檔案中
  • 支援從檔案（txt）中讀取資料
  • 預先定義顏色模板
  • 自動生成標註
  • 支援自定義x，y軸的顯示標籤
  • 支援x，y軸動畫
  • 支援x，y軸設定最大值和附加資訊
  • 支援自定義字型，顏色，背景，手勢，虛線等

整合和使用

總共有四種方式整合，推薦直接用Gradle依賴

1. 在project根目錄的build.gradle新增中央庫地址

   allprojects {
    repositories {
        maven { url "https://jitpack.io"
    
    }
    }
   }

2. 在專案build.gradle中新增相關依賴:

   dependencies {
    compile 'com.github.PhilJay:MPAndroidChart:v3.0.0-beta1'
   }

3. 在xml檔案定義圖表型別，比如LineChart, BarChart, ScatterChart, CandleStickChart, PieChart, BubbleChart or RadarChart

   <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/chart1"
        android:layout_width
    
   ="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/seekBar1" />

4. 基礎設定

   mChart = (LineChart) findViewById(R.id.chart1);
        mChart.setOnChartGestureListener(this);
        mChart.setOnChartValueSelectedListener(this);
        mChart.setDrawGridBackground(false);
   
        // no description text
        mChart.setDescription("");
        mChart.setNoDataTextDescription("You need to provide data for the chart.");
   
        // enable touch gestures
        mChart.setTouchEnabled(true);
   
        // enable scaling and dragging
        mChart.setDragEnabled(true);
        mChart.setScaleEnabled(true);
        // mChart.setScaleXEnabled(true);
        // mChart.setScaleYEnabled(true);
   
        // if disabled, scaling can be done on x- and y-axis separately
        mChart.setPinchZoom(true);
   
        // set an alternative background color
        // mChart.setBackgroundColor(Color.GRAY);
   
        // create a custom MarkerView (extend MarkerView) and specify the layout
        // to use for it
        MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);
   
        // set the marker to the chart
        mChart.setMarkerView(mv);

5. 設定資料來源：各種圖表的資料不太一致，對於LineChart而言，就是一系列的（x,y）

   /**
     * 設定模擬資料
     * @param count 模擬的個數
     * @param range 資料的範圍
     */
    private void setData(int count, float range) {
   
        ArrayList<Entry> values = new ArrayList<Entry>();
   
        for (int i = 0; i < count; i++) {
   
            float val = (float) (Math.random() * range) + 3;
            values.add(new Entry(i, val));
        }
   
        LineDataSet set1;
   
        if (mChart.getData() != null &&
                mChart.getData().getDataSetCount() > 0) {
            set1 = (LineDataSet)mChart.getData().getDataSetByIndex(0);
            set1.setValues(values);
            mChart.getData().notifyDataChanged();
            mChart.notifyDataSetChanged();
        } else {
            // create a dataset and give it a type
            set1 = new LineDataSet(values, "DataSet 1");
   
            // set the line to be drawn like this "- - - - - -"
            set1.enableDashedLine(10f, 5f, 0f);
            set1.enableDashedHighlightLine(10f, 5f, 0f);
            set1.setColor(Color.BLACK);
            set1.setCircleColor(Color.BLACK);
            set1.setLineWidth(1f);
            set1.setCircleRadius(3f);
            set1.setDrawCircleHole(false);
            set1.setValueTextSize(9f);
            set1.setDrawFilled(true);
   
            if (Utils.getSDKInt() >= 18) {
                // fill drawable only supported on api level 18 and above
                Drawable drawable = ContextCompat.getDrawable(this, R.drawable.fade_red);
                set1.setFillDrawable(drawable);
            }
            else {
                set1.setFillColor(Color.BLACK);
            }
   
            ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
            dataSets.add(set1); // add the datasets
   
            // create a data object with the datasets
            LineData data = new LineData(dataSets);
   
            // set data
            mChart.setData(data);
        }
    }

   此處原始碼，參考Demo中的LineChartActivity1

最後樣式如下：

Demo概覽

Demo提供32個樣例：

1. Line Chart：演示一個簡單的線圖
2. Line Chart (Dual YAxis)：演示一個有兩個Y軸線圖
3. Bar Chart：演示一個柱狀圖
4. Horizontal Bar Chart：演示水平柱狀圖，即X軸和Y軸反過來。
5. Combined Chart：演示 線圖、柱狀圖、蠟燭圖、氣泡圖 如何疊加在一起顯示
6. Pie Chart：演示簡易餅狀圖
7. Pie Chart with value lines：演示帶資料線的餅狀圖
8. Scatter Chart：演示了 圓點、方點、斜線 這三種樣式的散點圖
9. Bubble Chart: 演示了不同顏色的氣泡圖。
10. Stacked Bar Chart: 演示了堆積條形圖
11. Stacked Bar Chart Negative：演示了有負數數值的堆積條形圖
12. Another Bar Chart：只在底部顯示值的柱狀圖。
13. Multiple Lines Chart：3條線圖混合在一起，用顏色和實線、虛線來區分
14. Multiple Bars Chart：不同年份、不同公司的資料組成的柱狀圖
15. Charts in ViewPager Fragments：結合ViewPager、Fragment，透過左右滑動檢視不同的圖表。
16. BarChart inside ListView：柱狀圖如何嵌入在ListView中
17. Multiple charts inside ListView：不同型別的圖表如何嵌入在ListView中
18. Inverted Line Chart：演示（0，0）在左上角的線圖
19. Candle Stick Chart: 演示蠟燭圖
20. Cubic Line Chart：演示 立方擬合的折線圖
21. Radar Chart：演示雷達圖
22. Colored Line Chart：在不同背景色上演示同一張線圖
23. Realtime Chart：實時產生資料，進行演示。
24. Dynamical data adding：實時產生資料集和資料，進行演示。
25. Performance Line Chart：用30000個數據來測試效能。
26. Sinus Bar Chart：演示正弦柱狀圖。
27. Chart in ScrollView：演示如何把圖表放在ScrollView中。
28. BarChart positive / negative：演示有負值的柱狀圖。
29. Realm.io Database：演示如何從Realm資料庫中獲取資料進行展示（裡面有9個案例）。
30. Time Chart：演示時間圖。
31. Filled LineChart：演示如何填滿兩條線圖中間的部分。
32. Half PieChart：演示一個半圓的餅狀圖。

參考：

Panda
2016-08-03