條形圖和線形圖的組合圖

一圖勝千文忱屑，純粹的數(shù)據(jù)枯燥蹬敲、無聊扼褪，讓人看不下去，改變一下形式粱栖，用圖表裝飾一下话浇，立馬有趣多了。既然有這樣的外部需求闹究，Android世界里肯定要有圖表庫(kù)才行幔崖，今天解析的就是其中最強(qiáng)大的一個(gè)MPAndroidChart。

GitHub地址：https://github.com/PhilJay/MPAndroidChart

核心功能

• 支持以下圖表：
  • Line Chart（線圖）
  • Bar Chart（條形圖渣淤，又稱柱狀圖）
  • Combined Chart（組合圖：線性+條形）
  • Pie Chart（餅狀圖）
  • Scatter Chart（散點(diǎn)圖）
  • Bubble Chart（氣泡圖）
  • Stacked Bar Chart（堆積條形圖）
  • Candle Stick Chart（蠟燭圖）
  • Cubic Line Chart（立方擬合的折線圖）
  • Radar Chart（雷達(dá)圖）
  • Realtime Chart（實(shí)時(shí)折線圖）
  • Sinus Bar Chart（正弦柱狀圖）
• 支持以下操作和設(shè)置：
  • 支持x赏寇，y軸縮放
  • 支持拖拽
  • 支持手指滑動(dòng)
  • 支持高亮顯示
  • 支持保存圖表到文件中
  • 支持從文件（txt）中讀取數(shù)據(jù)
  • 預(yù)先定義顏色模板
  • 自動(dòng)生成標(biāo)注
  • 支持自定義x，y軸的顯示標(biāo)簽
  • 支持x价认，y軸動(dòng)畫
  • 支持x嗅定，y軸設(shè)置最大值和附加信息
  • 支持自定義字體，顏色用踩，背景渠退，手勢(shì)，虛線等

集成和使用

總共有四種方式集成脐彩，推薦直接用Gradle依賴

1. 在project根目錄的build.gradle添加中央庫(kù)地址

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

2. 在項(xiàng)目build.gradle中添加相關(guān)依賴:

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. 基礎(chǔ)設(shè)置

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è)置數(shù)據(jù)源：各種圖表的數(shù)據(jù)不太一致，對(duì)于LineChart而言惠奸，就是一系列的（x,y）

/**
     * 設(shè)置模擬數(shù)據(jù)
     * @param count 模擬的個(gè)數(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個(gè)樣例：

1. Line Chart：演示一個(gè)簡(jiǎn)單的線圖
2. Line Chart (Dual YAxis)：演示一個(gè)有兩個(gè)Y軸線圖
3. Bar Chart：演示一個(gè)柱狀圖
4. Horizontal Bar Chart：演示水平柱狀圖，即X軸和Y軸反過來佛南。
5. Combined Chart：演示 線圖梗掰、柱狀圖、蠟燭圖嗅回、氣泡圖 如何疊加在一起顯示
6. Pie Chart：演示簡(jiǎn)易餅狀圖
7. Pie Chart with value lines：演示帶數(shù)據(jù)線的餅狀圖
8. Scatter Chart：演示了 圓點(diǎn)及穗、方點(diǎn)、斜線 這三種樣式的散點(diǎn)圖
9. Bubble Chart: 演示了不同顏色的氣泡圖妈拌。
10. Stacked Bar Chart: 演示了堆積條形圖
11. Stacked Bar Chart Negative：演示了有負(fù)數(shù)數(shù)值的堆積條形圖
12. Another Bar Chart：只在底部顯示值的柱狀圖拥坛。
13. Multiple Lines Chart：3條線圖混合在一起，用顏色和實(shí)線尘分、虛線來區(qū)分
14. Multiple Bars Chart：不同年份猜惋、不同公司的數(shù)據(jù)組成的柱狀圖
15. Charts in ViewPager Fragments：結(jié)合ViewPager、Fragment培愁，透過左右滑動(dòng)查看不同的圖表著摔。
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：演示雷達(dá)圖
22. Colored Line Chart：在不同背景色上演示同一張線圖
23. Realtime Chart：實(shí)時(shí)產(chǎn)生數(shù)據(jù)定续，進(jìn)行演示谍咆。
24. Dynamical data adding：實(shí)時(shí)產(chǎn)生數(shù)據(jù)集和數(shù)據(jù)禾锤，進(jìn)行演示。
25. Performance Line Chart：用30000個(gè)數(shù)據(jù)來測(cè)試性能摹察。
26. Sinus Bar Chart：演示正弦柱狀圖恩掷。
27. Chart in ScrollView：演示如何把圖表放在ScrollView中。
28. BarChart positive / negative：演示有負(fù)值的柱狀圖供嚎。
29. Realm.io Database：演示如何從Realm數(shù)據(jù)庫(kù)中獲取數(shù)據(jù)進(jìn)行展示（里面有9個(gè)案例）黄娘。
30. Time Chart：演示時(shí)間圖。
31. Filled LineChart：演示如何填滿兩條線圖中間的部分克滴。
32. Half PieChart：演示一個(gè)半圓的餅狀圖逼争。

參考：

1. zhuanghongji·MPAndroidChart 圖表庫(kù)的API練習(xí)
2. android開源圖表庫(kù)MPAndroidChart

Panda
2016-08-03