條形圖和線形圖的組合圖

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

GitHub地址：https://github.com/PhilJay/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）中讀取數(shù)據(jù)
  • 預先定義顏色模板
  • 自動生成標注
  • 支持自定義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. 設置數(shù)據(jù)源：各種圖表的數(shù)據(jù)不太一致，對于LineChart而言，就是一系列的（x,y）

/**
     * 設置模擬數(shù)據(jù)
     * @param count 模擬的個數(shù)
     * @param range 數(shù)據(jù)的范圍
     */
    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：演示帶數(shù)據(jù)線的餅狀圖
8. Scatter Chart：演示了 圓點、方點、斜線 這三種樣式的散點圖
9. Bubble Chart: 演示了不同顏色的氣泡圖。
10. Stacked Bar Chart: 演示了堆積條形圖
11. Stacked Bar Chart Negative：演示了有負數(shù)數(shù)值的堆積條形圖
12. Another Bar Chart：只在底部顯示值的柱狀圖。
13. Multiple Lines Chart：3條線圖混合在一起，用顏色和實線、虛線來區(qū)分
14. Multiple Bars Chart：不同年份、不同公司的數(shù)據(jù)組成的柱狀圖
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：實時產生數(shù)據(jù)，進行演示。
24. Dynamical data adding：實時產生數(shù)據(jù)集和數(shù)據(jù)，進行演示。
25. Performance Line Chart：用30000個數(shù)據(jù)來測試性能。
26. Sinus Bar Chart：演示正弦柱狀圖。
27. Chart in ScrollView：演示如何把圖表放在ScrollView中。
28. BarChart positive / negative：演示有負值的柱狀圖。
29. Realm.io Database：演示如何從Realm數(shù)據(jù)庫中獲取數(shù)據(jù)進行展示（里面有9個案例）。
30. Time Chart：演示時間圖。
31. Filled LineChart：演示如何填滿兩條線圖中間的部分。
32. Half PieChart：演示一個半圓的餅狀圖。

參考：

1. zhuanghongji·MPAndroidChart 圖表庫的API練習
2. android開源圖表庫MPAndroidChart

Panda
2016-08-03