一偎箫、前言
項(xiàng)目中為了能讓用戶對(duì)數(shù)據(jù)有更直觀的認(rèn)識(shí)皆串，也為了讓數(shù)據(jù)的展示更加高 Bigger，往往都選擇了以圖表的方式展示給用戶娇唯，如折線圖塔插、餅圖拓哟、雷達(dá)圖等.....而且數(shù)據(jù)的展示最好還能伴有動(dòng)畫的形式就更佳了。
今天要學(xué)習(xí)的MPAndroidChart
應(yīng)該說(shuō)是目前使用最廣流纹，當(dāng)然也是最佳的開(kāi)源解決方案了漱凝。在一定程度上，它滿足了大部分業(yè)務(wù)的需求愕乎。
二壁公、核心功能
學(xué)習(xí)的最好資料是官網(wǎng)和源碼紊册。下面是官網(wǎng)的核心功能列表，這里只是做一個(gè)簡(jiǎn)單的翻譯芳绩，可能不準(zhǔn)確撞反，有需要可以移步官方文檔說(shuō)明。
MPAndroidChart最重要的核心功能
- 許多不同的圖表類型：LineChart(線型圖)，BarChart（條狀圖丁稀，垂直倚聚，水平，堆疊授账，分組）白热，PieChart（餅圖）粗卜，ScatterChart(散點(diǎn)圖)，CandleStickChart（K線圖攻臀、蠟燭圖），RadarChart（雷達(dá)圖堡赔、蜘蛛網(wǎng)絡(luò)圖表）善已，BubbleChart(氣泡圖)
- 組合圖表（例如仑荐，一條線和一條條）
- 在兩個(gè)軸上縮放（帶有觸摸手勢(shì)，單獨(dú)的軸或捏縮放）
- 拖動(dòng)/平移（帶有觸摸手勢(shì)）
- 分開(kāi)的（雙）y軸
- 突出顯示值（帶有可自定義的彈出視圖）
- 將圖表保存到SD卡（作為圖像）
- 預(yù)定義的顏色模板
- 圖例（自動(dòng)生成啥寇，可自定義）
- 可自定義的軸（x軸和y軸）
- 動(dòng)畫（在x軸和y軸上建立動(dòng)畫）
- 極限線（提供其他信息辑甜，最大值等）
- 觸摸袍冷，手勢(shì)和選擇回調(diào)的偵聽(tīng)器
- 完全可定制（繪畫胡诗，字體，圖例骇陈，顏色瑰抵，背景，虛線等）
- 通過(guò)MPAndroidChart-Realm庫(kù)支持Realm.io移動(dòng)數(shù)據(jù)庫(kù)
- 在Line-Chart和BarChart中平滑渲染多達(dá)10.000個(gè)數(shù)據(jù)點(diǎn)（在運(yùn)行Android 6.0的2014 OnePlus One上測(cè)試）
- 輕量級(jí)（方法計(jì)數(shù)?1.4K）
- 可作為.jar文件使用（大小僅為500kb）
- 可作為gradle依賴項(xiàng)并通過(guò)Maven獲得
- Google-PlayStore演示應(yīng)用程序
- 廣泛使用婿崭，對(duì)GitHub和stackoverflow 都提供了強(qiáng)大的支持– mpandroidchart
- 也可用于iOS：圖表（API的工作方式相同）
- 也可用于Xamarin：MPAndroidChart.Xamarin
- 對(duì)動(dòng)態(tài)和實(shí)時(shí)數(shù)據(jù)的有限的支持
三氓栈、官網(wǎng)文檔列表說(shuō)明
下面是官網(wǎng)文檔的文章列表颤绕，這里作了一個(gè)簡(jiǎn)單的翻譯以及理解補(bǔ)充。
- 入門奥务，簡(jiǎn)單演示了如何使用，如 LineChart挡篓。
- 與圖表的互動(dòng)官研，手勢(shì)的支持闯睹，如拖拽、雙指縮放等
- 高亮數(shù)據(jù)
- 軸（AxisBase）始花，如何設(shè)置坐標(biāo)軸等
- X軸
- Y軸
- 設(shè)定數(shù)據(jù)酷宵，通過(guò) setData() 設(shè)置數(shù)據(jù)躬窜，主要以數(shù)據(jù)集的方式呈現(xiàn)，不同的圖表有自己的數(shù)據(jù)集類型男韧。
- 設(shè)置顏色默垄，設(shè)置數(shù)值、坐標(biāo)軸寡壮、線條讹弯、填充色等
- 格式化值（ValueFormatter）组民，格式化顯示數(shù)值悲靴，默認(rèn)情況下是原數(shù)據(jù)展示。但比如時(shí)間戳我們可能要展示成年月日耸三。
- 常規(guī)設(shè)置和樣式
- 具體設(shè)置和樣式
- Legend ，我把它翻譯成圖示憨颠。
- 描述
- 動(dòng)態(tài)和實(shí)時(shí)數(shù)據(jù)
- 修改視口
- 動(dòng)畫 爽彤，可沿 X 軸或者 Y 軸以動(dòng)畫的方式展示
- MarkerView（彈出視圖）
- ChartData類 下面幾個(gè)類比較重要缚陷，可以認(rèn)為是給 Chart 設(shè)置 ChartData箫爷，而 ChartData 包含 ChartDataSet，這就是圖-數(shù)據(jù)-數(shù)據(jù)集之間的關(guān)系丹喻。
- ChartData子類
- DataSet類（通用DataSet樣式）
- DataSet子類（特定的DataSet樣式）
- ViewPortHandler翁都，提供手動(dòng)修改視口大小的方法，如縮放倍數(shù)鳍悠、平移等
- 自定義填充線位置（FillFormatter）
- Xamarin
- 創(chuàng)建自己的（自定義）數(shù)據(jù)集
- 雜項(xiàng)（更有用的東西）
四藏研、入門使用
先通過(guò)一張圖來(lái)看一看概行，圖例中所包含的東西有哪些內(nèi)容吧。
image.png
實(shí)現(xiàn)步驟业踏，代碼來(lái)自官方示例：
- 布局或者 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" />
- 獲取實(shí)例
chart = findViewById(R.id.chart1);
- 基礎(chǔ)屬性設(shè)置
// 背景色
chart.setBackgroundColor(Color.WHITE);
// 圖表的文本描述
chart.getDescription().setEnabled(false);
// 手勢(shì)設(shè)置
chart.setTouchEnabled(true);
// 添加監(jiān)聽(tīng)器
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);
- X 軸設(shè)置
// 獲取 X 軸
xAxis = chart.getXAxis();
// 允許顯示 X 軸的垂直網(wǎng)格線
xAxis.enableGridDashedLine(10f, 10f, 0f);
- 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);
- 設(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 讼庇，用來(lái)添加 Entry。一個(gè)圖中可以包含多個(gè)數(shù)據(jù)集
set1 = new LineDataSet(values, "DataSet 1");
// 3. 通過(guò)數(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é)
最后來(lái)總結(jié)一下：
對(duì)于圖表關(guān)鍵需要知道并理解的是圖、數(shù)據(jù)靶溜、數(shù)據(jù)集以及 Entry懒震，這是定義并顯示圖表的關(guān)鍵概念，它們的關(guān)系是Entry 添加到數(shù)據(jù)集中瓷炮，數(shù)據(jù)集被添加到數(shù)據(jù)中递宅，數(shù)據(jù)被添加到圖表中。
如果要對(duì) X 軸和 Y 軸進(jìn)行設(shè)置可分別通過(guò) XAxis 和 YAxis 進(jìn)行設(shè)置
如果要對(duì)數(shù)據(jù)進(jìn)行設(shè)置烘绽，則通過(guò) DataSet 進(jìn)行設(shè)置
如果要設(shè)置手勢(shì)等诀姚，可通過(guò)圖表 Chart 進(jìn)行設(shè)置
