MPAndroidChart 簡介

一、前言

項(xiàng)目中為了能讓用戶對數(shù)據(jù)有更直觀的認(rèn)識(shí)，也為了讓數(shù)據(jù)的展示更加高 Bigger，往往都選擇了以圖表的方式展示給用戶，如折線圖、餅圖、雷達(dá)圖等.....而且數(shù)據(jù)的展示最好還能伴有動(dòng)畫的形式就更佳了。

今天要學(xué)習(xí)的MPAndroidChart
應(yīng)該說是目前使用最廣，當(dāng)然也是最佳的開源解決方案了。在一定程度上，它滿足了大部分業(yè)務(wù)的需求。

二、核心功能

學(xué)習(xí)的最好資料是官網(wǎng)和源碼。下面是官網(wǎng)的核心功能列表，這里只是做一個(gè)簡單的翻譯，可能不準(zhǔn)確，有需要可以移步官方文檔說明。

MPAndroidChart最重要的核心功能

  • 許多不同的圖表類型：LineChart(線型圖)，BarChart（條狀圖，垂直，水平，堆疊，分組），PieChart（餅圖），ScatterChart(散點(diǎn)圖)，CandleStickChart（K線圖、蠟燭圖），RadarChart（雷達(dá)圖、蜘蛛網(wǎng)絡(luò)圖表），BubbleChart(氣泡圖)
  • 組合圖表（例如，一條線和一條條）
  • 在兩個(gè)軸上縮放（帶有觸摸手勢，單獨(dú)的軸或捏縮放）
  • 拖動(dòng)/平移（帶有觸摸手勢）
  • 分開的（雙）y軸
  • 突出顯示值（帶有可自定義的彈出視圖）
  • 將圖表保存到SD卡（作為圖像）
  • 預(yù)定義的顏色模板
  • 圖例（自動(dòng)生成，可自定義）
  • 可自定義的軸（x軸和y軸）
  • 動(dòng)畫（在x軸和y軸上建立動(dòng)畫）
  • 極限線（提供其他信息，最大值等）
  • 觸摸，手勢和選擇回調(diào)的偵聽器
  • 完全可定制（繪畫，字體，圖例，顏色，背景，虛線等）
  • 通過MPAndroidChart-Realm庫支持Realm.io移動(dòng)數(shù)據(jù)庫
  • 在Line-Chart和BarChart中平滑渲染多達(dá)10.000個(gè)數(shù)據(jù)點(diǎn)（在運(yùn)行Android 6.0的2014 OnePlus One上測試）
  • 輕量級(jí)（方法計(jì)數(shù)?1.4K）
  • 可作為.jar文件使用（大小僅為500kb）
  • 可作為gradle依賴項(xiàng)并通過Maven獲得
  • Google-PlayStore演示應(yīng)用程序
  • 廣泛使用，對GitHub和stackoverflow 都提供了強(qiáng)大的支持– mpandroidchart
  • 也可用于iOS：圖表（API的工作方式相同）
  • 也可用于Xamarin：MPAndroidChart.Xamarin
  • 對動(dòng)態(tài)和實(shí)時(shí)數(shù)據(jù)的有限的支持

三、官網(wǎng)文檔列表說明

下面是官網(wǎng)文檔的文章列表，這里作了一個(gè)簡單的翻譯以及理解補(bǔ)充。

  1. 入門，簡單演示了如何使用，如 LineChart。
  2. 與圖表的互動(dòng)，手勢的支持，如拖拽、雙指縮放等
  3. 高亮數(shù)據(jù)
  4. 軸（AxisBase），如何設(shè)置坐標(biāo)軸等
  5. X軸
  6. Y軸
  7. 設(shè)定數(shù)據(jù)，通過 setData() 設(shè)置數(shù)據(jù)，主要以數(shù)據(jù)集的方式呈現(xiàn)，不同的圖表有自己的數(shù)據(jù)集類型。
  8. 設(shè)置顏色，設(shè)置數(shù)值、坐標(biāo)軸、線條、填充色等
  9. 格式化值（ValueFormatter），格式化顯示數(shù)值，默認(rèn)情況下是原數(shù)據(jù)展示。但比如時(shí)間戳我們可能要展示成年月日。
  10. 常規(guī)設(shè)置和樣式
  11. 具體設(shè)置和樣式
  12. Legend ，我把它翻譯成圖示。
  13. 描述
  14. 動(dòng)態(tài)和實(shí)時(shí)數(shù)據(jù)
  15. 修改視口
  16. 動(dòng)畫 ，可沿 X 軸或者 Y 軸以動(dòng)畫的方式展示
  17. MarkerView（彈出視圖）
  18. ChartData類 下面幾個(gè)類比較重要，可以認(rèn)為是給 Chart 設(shè)置 ChartData，而 ChartData 包含 ChartDataSet，這就是圖-數(shù)據(jù)-數(shù)據(jù)集之間的關(guān)系。
  19. ChartData子類
  20. DataSet類（通用DataSet樣式）
  21. DataSet子類（特定的DataSet樣式）
  22. ViewPortHandler，提供手動(dòng)修改視口大小的方法，如縮放倍數(shù)、平移等
  23. 自定義填充線位置（FillFormatter）
  24. Xamarin
  25. 創(chuàng)建自己的（自定義）數(shù)據(jù)集
  26. 雜項(xiàng)（更有用的東西）

四、入門使用

先通過一張圖來看一看，圖例中所包含的東西有哪些內(nèi)容吧。

image.png

實(shí)現(xiàn)步驟，代碼來自官方示例：

  1. 布局或者 new 一個(gè) LineChart 實(shí)例
<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" />
  1. 獲取實(shí)例
chart = findViewById(R.id.chart1);
  1. 基礎(chǔ)屬性設(shè)置
            // 背景色
            chart.setBackgroundColor(Color.WHITE);

            // 圖表的文本描述
            chart.getDescription().setEnabled(false);

            // 手勢設(shè)置
            chart.setTouchEnabled(true);

            // 添加監(jiān)聽器
            chart.setOnChartValueSelectedListener(this);
            chart.setDrawGridBackground(false);

            // 自定義 MarkView，當(dāng)數(shù)據(jù)被選擇時(shí)會(huì)展示
            MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);
            mv.setChartView(chart);
            chart.setMarker(mv);

            // 設(shè)置拖拽、縮放等
            chart.setDragEnabled(true);
            chart.setScaleEnabled(true);
            chart.setScaleXEnabled(true);
            chart.setScaleYEnabled(true);

            // 設(shè)置雙指縮放
            chart.setPinchZoom(true);
  1. X 軸設(shè)置
// 獲取 X 軸
xAxis = chart.getXAxis();

// 允許顯示 X 軸的垂直網(wǎng)格線
xAxis.enableGridDashedLine(10f, 10f, 0f);
  1. Y 軸設(shè)置
// 獲取 Y 軸
yAxis = chart.getAxisLeft();

// 禁止右軸
chart.getAxisRight().setEnabled(false);

// Y 軸的水平網(wǎng)格線
yAxis.enableGridDashedLine(10f, 10f, 0f);

// 設(shè)置 Y 軸的數(shù)值范圍
yAxis.setAxisMaximum(200f);
yAxis.setAxisMinimum(-50f);
  1. 設(shè)置數(shù)據(jù)
// 1. 每個(gè)數(shù)據(jù)是一個(gè) Entry
ArrayList<Entry> values = new ArrayList<>();

for (int i = 0; i < count; i++) {

    float val = (float) (Math.random() * range) - 30;
    values.add(new Entry(i, val, getResources().getDrawable(R.drawable.star)));
}

// 2. 創(chuàng)建一個(gè)數(shù)據(jù)集 DataSet ，用來添加 Entry。一個(gè)圖中可以包含多個(gè)數(shù)據(jù)集
set1 = new LineDataSet(values, "DataSet 1");

// 3. 通過數(shù)據(jù)集設(shè)置數(shù)據(jù)的樣式，如字體顏色、線型、線型顏色、填充色、線寬等屬性
// draw dashed line
set1.enableDashedLine(10f, 5f, 0f);

// black lines and points
set1.setColor(Color.BLACK);
set1.setCircleColor(Color.BLACK);

// line thickness and point size
set1.setLineWidth(1f);
et1.setCircleRadius(3f);

// draw points as solid circles
set1.setDrawCircleHole(false);

// 4.將數(shù)據(jù)集添加到數(shù)據(jù) ChartData 中
LineData data = new LineData(dataSets);

// 5. 將數(shù)據(jù)添加到圖表中
chart.setData(data);

五、總結(jié)

最后來總結(jié)一下：

  1. 對于圖表關(guān)鍵需要知道并理解的是圖、數(shù)據(jù)、數(shù)據(jù)集以及 Entry，這是定義并顯示圖表的關(guān)鍵概念，它們的關(guān)系是Entry 添加到數(shù)據(jù)集中，數(shù)據(jù)集被添加到數(shù)據(jù)中，數(shù)據(jù)被添加到圖表中。

  2. 如果要對 X 軸和 Y 軸進(jìn)行設(shè)置可分別通過 XAxis 和 YAxis 進(jìn)行設(shè)置

  3. 如果要對數(shù)據(jù)進(jìn)行設(shè)置，則通過 DataSet 進(jìn)行設(shè)置

  4. 如果要設(shè)置手勢等，可通過圖表 Chart 進(jìn)行設(shè)置

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容