MPAndroidChart折線圖詳細使用(三)
阿新 • • 發佈:2019-02-06
1.佈局檔案
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height ="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="horizontal"
android:paddingLeft="10dp">
<TextView
android:layout_width="2dp"
android:layout_height ="13dp"
android:background="#4a6def"
android:paddingLeft="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="11dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="一條折線圖"
android:textColor="#222222"
android:textSize="14sp" />
</LinearLayout>
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart"
android:layout_width="match_parent"
android:layout_height="200dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff"
android:orientation="horizontal"
android:paddingLeft="10dp">
<TextView
android:layout_width="2dp"
android:layout_height="13dp"
android:background="#4a6def"
android:paddingLeft="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="11dp"
android:paddingBottom="10dp"
android:paddingTop="10dp"
android:text="多條折線圖"
android:textColor="#222222"
android:textSize="14sp" />
</LinearLayout>
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart2"
android:layout_width="match_parent"
android:layout_height="250dp"
></com.github.mikephil.charting.charts.LineChart>
</LinearLayout>
</LinearLayout>
</ScrollView>
二 顯示折線圖的acticity
package com.phone.mpandroid;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import com.github.mikephil.charting.charts.LineChart;
import java.util.ArrayList;
import java.util.List;
public class LinCharts extends AppCompatActivity {
private LineChart lineChart,lineChart2;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_lin_charts);
initView();
}
private void initView() {
lineChart= (LineChart) findViewById(R.id.lineChart);
lineChart2= (LineChart) findViewById(R.id.lineChart2);
// 顯 示一條折線
showAlone();
LineChartManager lineChartManager=new LineChartManager(lineChart2);
//設定x軸的資料
ArrayList<Float> xValues = new ArrayList<>();
for (int i = 0; i <= 4; i++) {
xValues.add((float) i);
}
//設定y軸的資料()
List<List<Float>> yValues = new ArrayList<>();
List<Float> y1Value = new ArrayList<>();
List<Float> y2Value = new ArrayList<>();
List<String> lableNameList = new ArrayList<>();
lableNameList.add("交通執行");
lableNameList.add("擁擠指數");
for (int j = 0; j <= 4; j++) {
float value = (float) (Math.random() * 80);
y1Value.add(value);
y2Value.add(value-5);
}
yValues.add(y1Value);
yValues.add(y2Value);
List<Integer> colorList = new ArrayList<>();
colorList.add(Color.parseColor("#6785f2"));
colorList.add(Color.parseColor("#eecc44"));
lineChartManager.showLineChart(xValues, yValues, lableNameList, colorList);
lineChartManager.setDescription("");
}
private void showAlone() {
LineChartManager lineChartManager=new LineChartManager(lineChart);
List<Float> xAxisValues=new ArrayList<>();
List<Float> yAxisValues=new ArrayList<>();
xAxisValues.add(0.0f);
xAxisValues.add(1.0f);
xAxisValues.add(2.0f);
xAxisValues.add(3.0f);
xAxisValues.add(4.0f);
xAxisValues.add(5.0f);
yAxisValues.add(50f);
yAxisValues.add(60f);
yAxisValues.add(70f);
yAxisValues.add(40f);
yAxisValues.add(80f);
yAxisValues.add(60f);
lineChartManager.showLineChart(xAxisValues,yAxisValues,"", Color.parseColor("#da6268"));
}
}
三 顯示折線圖的管理類
package com.phone.mpandroid;
import android.graphics.Color;
import com.github.mikephil.charting.charts.LineChart;
import com.github.mikephil.charting.components.AxisBase;
import com.github.mikephil.charting.components.Description;
import com.github.mikephil.charting.components.Legend;
import com.github.mikephil.charting.components.LimitLine;
import com.github.mikephil.charting.components.XAxis;
import com.github.mikephil.charting.components.YAxis;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.data.LineData;
import com.github.mikephil.charting.data.LineDataSet;
import com.github.mikephil.charting.formatter.IAxisValueFormatter;
import com.github.mikephil.charting.interfaces.datasets.ILineDataSet;
import java.util.ArrayList;
import java.util.List;
/**
* Created by zhang on 2018/7/9.
*/
public class LineChartManager {
private LineChart lineChart;
private YAxis leftAxis; //左邊Y軸
private YAxis rightAxis; //右邊Y軸
private XAxis xAxis; //X軸
public LineChartManager(LineChart mLineChart) {
this.lineChart = mLineChart;
leftAxis = lineChart.getAxisLeft();
rightAxis = lineChart.getAxisRight();
xAxis = lineChart.getXAxis();
}
/**
* 初始化LineChart
*/
private void initLineChart(boolean legendShow) {
lineChart.setDrawGridBackground(false);
//顯示邊界
lineChart.setDrawBorders(false);
//設定動畫效果
lineChart.animateX(1000);
lineChart.setTouchEnabled(true); // 所有觸控事件,預設true
lineChart.setDragEnabled(false); // 可拖動,預設true
lineChart.setScaleEnabled(false); // 兩個軸上的縮放,X,Y分別預設為true
lineChart.setScaleXEnabled(false); // X軸上的縮放,預設true
lineChart.setScaleYEnabled(false); // Y軸上的縮放,預設true
lineChart.setPinchZoom(false); // X,Y軸同時縮放,false則X,Y軸單獨縮放,預設false
lineChart.setDoubleTapToZoomEnabled(false); // 雙擊縮放,預設true
lineChart.setDragDecelerationEnabled(true); // 擡起手指,繼續滑動,預設true
//折線圖例 標籤 設定
Legend legend = lineChart.getLegend();
if (legendShow) {
legend.setDrawInside(false);
legend.setFormSize(8);
legend.setXEntrySpace(7f);
legend.setYEntrySpace(0f);
legend.setYOffset(0f);
// legend.setForm(Legend.LegendForm.SQUARE);
// 文字的大小
legend.setTextSize(12);
//顯示位置
legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
} else {
legend.setForm(Legend.LegendForm.NONE);
}
//XY軸的設定
//X軸設定顯示位置在底部
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
xAxis.setAxisMinimum(0f);
xAxis.setGranularity(1f);
// 不繪製網格線
xAxis.setDrawGridLines(true);
xAxis.setGridColor(Color.parseColor("#d8d8d8"));
//設定最後和第一個標籤不超出x軸
xAxis.setAvoidFirstLastClipping(true);
// 設定線的寬度
xAxis.setAxisLineWidth(1.0f);
xAxis.setAxisLineColor(Color.parseColor("#d5d5d5"));
//保證Y軸從0開始,不然會上移一點
leftAxis.setAxisMinimum(0f);
// 顯示數字但不顯示線
leftAxis.setDrawAxisLine(true);
leftAxis.setTextColor(Color.parseColor("#d5d5d5"));
leftAxis.setDrawGridLines(true);
// 設定網格為虛線
leftAxis.enableGridDashedLine(10f, 10f, 0f);
leftAxis.setGridColor(Color.parseColor("#d8d8d8"));
leftAxis.setAxisLineColor(Color.parseColor("#d5d5d5"));
rightAxis.setAxisMinimum(0f);
// 線跟資料都不顯示
rightAxis.setEnabled(false); //右側Y軸不顯示
}
/**
* 初始化曲線 每一個LineDataSet代表一條線
*
* @param lineDataSet
* @param color
* @param mode 折線圖是否填充
*/
private void initLineDataSet(LineDataSet lineDataSet, int color, boolean mode) {
lineDataSet.setColor(color);
lineDataSet.setCircleColor(color);
lineDataSet.setLineWidth(2f);
lineDataSet.setCircleRadius(3f);
//設定曲線值的圓點是實心還是空心
lineDataSet.setDrawCircleHole(true);
lineDataSet.setValueTextSize(9f);
// 不顯示具體值
lineDataSet.setDrawValues(false);
// lineDataSet.setHighlightEnabled(false);
//設定折線圖填充
lineDataSet.setDrawFilled(mode);
//設定填充顏色
lineDataSet.setFillColor(color);
// lineDataSet.setFormLineWidth(2f);
// lineDataSet.setFormSize(15.f);
//線模式為圓滑曲線(預設折線)
lineDataSet.setMode(LineDataSet.Mode.LINEAR);
}
/**
* 跟showLineCharDouble配對
*
* @param lineDataSet
* @param color
* @param mode
*/
private void initLineCusDataSet(LineDataSet lineDataSet, int color, boolean mode) {
initLineDataSet(lineDataSet, color, mode);
lineDataSet.setDrawValues(false);
lineDataSet.setDrawCircles(false);
}
/**
* 展示折線圖(一條)
*
* @param xAxisValues
* @param yAxisValues
* @param label
* @param color
*/
public void showLineChart(List<Float> xAxisValues, List<Float> yAxisValues, String label, int color) {
initLineChart(false);
ArrayList<Entry> entries = new ArrayList<>();
for (int i = 0; i < xAxisValues.size(); i++) {
entries.add(new Entry(xAxisValues.get(i), yAxisValues.get(i)));
}
// 每一個LineDataSet代表一條線
LineDataSet lineDataSet = new LineDataSet(entries, label);
initLineDataSet(lineDataSet, color, true);
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
dataSets.add(lineDataSet);
LineData data = new LineData(dataSets);
//設定X軸的刻度數
// xAxis.setLabelCount(xAxisValues.size(), false);
xAxis.setTextColor(Color.parseColor("#a1a1a1"));
//文字傾斜度
// xAxis.setLabelRotationAngle(-45);
xAxis.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
if (value == 0) {
return "阜成門";
}
if (value == 2) {
return "國貿";
}
if (value == 3) {
return "積水潭";
}
if (value == 4) {
return "三元橋";
}
if (value == 5) {
return "西直門";
}
return "西直門";
}
});
lineChart.setData(data);
}
/**
* 展示折線圖(一條)
*
* @param xAxisValues
* @param yAxisValues
* @param label
* @param color
*/
public void showAirLineChart(List<Float> xAxisValues, List<Float> yAxisValues, String label, int color) {
initLineChart(false);
ArrayList<Entry> entries = new ArrayList<>();
for (int i = 0; i < xAxisValues.size(); i++) {
entries.add(new Entry(xAxisValues.get(i), yAxisValues.get(i)));
}
// 每一個LineDataSet代表一條線
LineDataSet lineDataSet = new LineDataSet(entries, label);
initLineDataSet(lineDataSet, color, true);
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
dataSets.add(lineDataSet);
LineData data = new LineData(dataSets);
//設定X軸的刻度數
// xAxis.setLabelCount(xAxisValues.size(), false);
xAxis.setTextColor(Color.parseColor("#a1a1a1"));
//文字傾斜度
// xAxis.setLabelRotationAngle(-45);
lineChart.setData(data);
}
/**
* 展示線性圖(多條)
*
* @param xAxisValues
* @param yAxisValues 多條曲線Y軸資料集合的集合
* @param labels
* @param colours
*/
public void showLineChart(List<Float> xAxisValues, List<List<Float>> yAxisValues, List<String> labels, List<Integer> colours) {
initLineChart(true);
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
for (int i = 0; i < yAxisValues.size(); i++) {
ArrayList<Entry> entries = new ArrayList<>();
for (int j = 0; j < yAxisValues.get(i).size(); j++) {
if (j >= xAxisValues.size()) {
j = xAxisValues.size() - 1;
}
entries.add(new Entry(xAxisValues.get(j), yAxisValues.get(i).get(j)));
}
LineDataSet lineDataSet = new LineDataSet(entries, labels.get(i));
initLineDataSet(lineDataSet, colours.get(i), true);
lineDataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
dataSets.add(lineDataSet);
}
LineData data = new LineData(dataSets);
xAxis.setLabelCount(xAxisValues.size(), true);
String[] xValues = {"6:00", "9:00", "12:00", "15:00", "18:00"};
xAxis.setValueFormatter(new XAxisValueFormatter(xValues));
lineChart.setData(data);
}
public class XAxisValueFormatter implements IAxisValueFormatter {
private String[] xValues;
public XAxisValueFormatter(String[] xValues) {
this.xValues = xValues;
}
@Override
public String getFormattedValue(float value, AxisBase axis) {
return xValues[(int) value];
}
}
/**
* 只顯示兩條 其中一條是影 定製化
*
* @param xAxisValues
* @param yAxisValues 只有兩條資料
* @param labels
* @param colours
*/
public void showLineCharDouble(List<Float> xAxisValues, List<List<Float>> yAxisValues, List<String> labels, List<Integer> colours) {
initLineChart(true);
ArrayList<ILineDataSet> dataSets = new ArrayList<>();
//
for (int i = 0; i < 2; i++) {
ArrayList<Entry> entries = new ArrayList<>();
for (int j = 0; j < yAxisValues.get(i).size(); j++) {
if (j >= xAxisValues.size()) {
j = xAxisValues.size() - 1;
}
entries.add(new Entry(xAxisValues.get(j), yAxisValues.get(i).get(j)));
}
LineDataSet lineDataSet = new LineDataSet(entries, labels.get(i));
initLineCusDataSet(lineDataSet, colours.get(i), false);
// if (i == 1) {
// initLineCusDataSet(lineDataSet, colours.get(i), false);
// } else {
// initLineDataSet(lineDataSet, colours.get(i), false);
// }
dataSets.add(lineDataSet);
}
LineData data = new LineData(dataSets);
xAxis.setLabelCount(xAxisValues.size(), true);
lineChart.setData(data);
}
/**
* 設定Y軸值
*
* @param max
* @param min
* @param labelCount
*/
public void setYAxis(float max, float min, int labelCount) {
if (max < min) {
return;
}
leftAxis.setAxisMaximum(max);
leftAxis.setAxisMinimum(min);
leftAxis.setLabelCount(labelCount, false);
rightAxis.setAxisMaximum(max);
rightAxis.setAxisMinimum(min);
rightAxis.setLabelCount(labelCount, false);
lineChart.invalidate();
}
/**
* 設定X軸的值
*
* @param max
* @param min
* @param labelCount
*/
public void setXAxis(float max, float min, int labelCount) {
xAxis.setAxisMaximum(max);
xAxis.setAxisMinimum(min);
xAxis.setLabelCount(labelCount, true);
lineChart.invalidate();
}
/**
* 設定高限制線
*
* @param high
* @param name
*/
public void setHightLimitLine(float high, String name, int color) {
if (name == null) {
name = "高限制線";
}
LimitLine hightLimit = new LimitLine(high, name);
hightLimit.setLineWidth(2f);
hightLimit.setTextSize(10f);
hightLimit.setLineColor(color);
hightLimit.setTextColor(color);
leftAxis.addLimitLine(hightLimit);
lineChart.invalidate();
}
/**
* 設定低限制線
*
* @param low
* @param name
*/
public void setLowLimitLine(int low, String name) {
if (name == null) {
name = "低限制線";
}
LimitLine hightLimit = new LimitLine(low, name);
hightLimit.setLineWidth(4f);
hightLimit.setTextSize(10f);
leftAxis.addLimitLine(hightLimit);
lineChart.invalidate();
}
/**
* 設定描述資訊
*
* @param str
*/
public void setDescription(String str) {
Description description = new Description();
description.setText(str);
lineChart.setDescription(description);
lineChart.invalidate();
}
}