Android 图表开源框架之MPAndroidChart LineChart折线图（一）
Android 图表开源框架之MPAndroidChart LineChart折线图（二）
Android 图表开源框架之MPAndroidChart LineChart折线图（三）
Android 图表开源框架之MPAndroidChart LineChart折线图（四）动态添加数据
Android 图表开源框架之MPAndroidChart PieChart扇形图（一）
Android 图表开源框架之MPAndroidChart PieChart扇形图（二）
Android 图表开源框架之MPAndroidChart LineChart之常用自定义设置功能
一.快速实现：
1.添加依赖：
app build.gradle文件：
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'packagingOptions {
exclude 'META-INF/proguard/androidx-annotations.pro'
}
最外层build.gradle文件：
// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.3'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
allprojects {
repositories {
google()
jcenter()
maven { url "https://jitpack.io" }
}
}
task clean(type: Delete) {
delete rootProject.buildDir
}2.主函数逻辑：
private LineChart lineChart;
float datas[] = {14f,15f,16f,17f,16f,16f};
float datas2[] = {17f,16f,15f,14f,17f,14f};
final String weeks[] = {"昨天","今天","明天","周五","周六","周日"};
//在MPAndroidChart一般都是通过List<Entry>对象来装数据的
final List<Entry> entries = new ArrayList<Entry>();
lineChart = (LineChart) findViewById(R.id.lineChart);
setThreeMpChart();
/**
* 3.1.0版本使用
*/
public void setThreeMpChart(){
//循环取出数据
for(int i = 0; i < datas.length; i++){
entries.add(new Entry(i,datas[i]));
}
Description description = new Description();//描述信息
description.setEnabled(false);//是否可用
lineChart.setDescription(description);//不然会显示默认的 Description。
lineChart.setTouchEnabled(true); // 设置是否可以触摸
lineChart.setDragEnabled(true);// 是否可以拖拽
lineChart.setScaleEnabled(true);// 是否可以缩放
lineChart.setPinchZoom(true);//y轴的值是否跟随图表变换缩放;如果禁止，y轴的值会跟随图表变换缩放
lineChart.setDoubleTapToZoomEnabled(false);//是否允许双击进行缩放
lineChart.setScaleXEnabled(true);//是否允许以X轴缩放
lineChart.setDrawGridBackground(false);// 是否显示表格颜色
lineChart.setGridBackgroundColor(Color.TRANSPARENT);// 表格的的颜色
lineChart.animateY(1000, Easing.Linear);//设置动画
lineChart.setExtraBottomOffset(5f);//防止底部数据显示不完整，设置底部偏移量
lineChart.setExtraRightOffset(45f);//防止右侧数据显示不完整，设置底部偏移量
//x轴配置
XAxis xAxis = lineChart.getXAxis();
xAxis.setEnabled(true);//是否可用
xAxis.setDrawLabels(true);//是否显示数值
xAxis.setDrawAxisLine(true);//是否显示坐标线
xAxis.setAxisLineColor(Color.BLACK);//设置坐标轴线的颜色
xAxis.setAxisLineWidth(0.8f);//设置坐标轴线的宽度
xAxis.setDrawGridLines(false);//是否显示竖直风格线
xAxis.setTextColor(Color.BLACK);//X轴文字颜色
// xAxis.setTextSize(12f);//X轴文字大小
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//X轴文字显示位置
xAxis.setSpaceMin(1f);//左空白区大小
xAxis.setSpaceMax(1f);//右空白区大小
xAxis.setGranularity(1);//间隔1
//设置X轴坐标自定义数据格式
xAxis.setValueFormatter(new IndexAxisValueFormatter(){
@Override
public String getFormattedValue(float value) {
//设置当前时间
int IValue = (int) value;
int a =(entries.size() - IValue);
// CharSequence format = DateFormat.format("MM/dd",
// System.currentTimeMillis() - (long) (entries.size() - IValue) * 24 * 60 * 60 * 1000);
// return format.toString();
// return super.getFormattedValue(value);
//自定义样式 IAxisValueFormatter 星期
//防止数组越界判断范围
if (IValue < 0 || IValue >= weeks.length) {
return "";
} else {
return weeks[IValue];
}
}
});
xAxis.setGranularity(1);//间隔1
//左y轴配置
YAxis lyAxis = lineChart.getAxisLeft();
lyAxis.setEnabled(true);//是否可用
lyAxis.setDrawLabels(true);//是否显示数值
lyAxis.setDrawAxisLine(true);//是否显示坐标线
lyAxis.setDrawGridLines(false);//是否显示水平网格线
lyAxis.setDrawZeroLine(true);是否绘制零线
lyAxis.setZeroLineColor(Color.BLACK);
// lyAxis.setZeroLineWidth(0.8f);
// lyAxis.enableGridDashedLine(10f, 10f, 0f);//网格虚线
lyAxis.setGridColor(Color.BLACK);//网格线颜色
lyAxis.setGridLineWidth(0.8f);//网格线宽度
lyAxis.setAxisLineColor(Color.BLACK);//坐标线颜色
lyAxis.setTextColor(Color.BLACK);//左侧文字颜色
lyAxis.setTextSize(12f);//左侧文字大小
//右y轴配置
YAxis ryAxis = lineChart.getAxisRight();
ryAxis.setEnabled(true);//是否可用
// 不显示y轴右边的值
ryAxis.setEnabled(false);
ryAxis.setDrawAxisLine(true);
ryAxis.setDrawZeroLine(true);
// ryAxis.setZeroLineWidth(1f);
ryAxis.setAxisLineWidth(0.8f);//设置右侧边界线宽度
ryAxis.setAxisLineColor(Color.BLACK);
//X轴左侧数据设置
// YAxis axisLeft = lineChart.getAxisLeft();
// axisLeft.setEnabled(true);//是否可用
// // 不显示y轴左边的值
// axisLeft.setEnabled(true);
// axisLeft.setDrawAxisLine(true);
// axisLeft.setDrawZeroLine(true);
ryAxis.setZeroLineWidth(1f);
// axisLeft.setAxisLineWidth(1);//设置左侧边界线宽度
// axisLeft.setAxisLineColor(Color.BLACK);
//标签配置
Legend legend = lineChart.getLegend();
legend.setEnabled(true);//是否可用
//x轴和y轴的数据
//循环取出数据
// for(int i = 0; i < datas2.length; i++){
// entries.add(new Entry(i,datas2[i]));
// }
// YourData[] dataObjects = ...;
// List<Entry> entries = new ArrayList<Entry>();
// for (YourData data : dataObjects) {
// entries.add(new Entry(data.getValueX(), data.getValueY()));
// }
LimitLine limitLineL = new LimitLine(15f, "临界点");//临界点
limitLineL.setLineColor(Color.RED);
limitLineL.setLineWidth(1.5f);
limitLineL.setTextSize(10f);
limitLineL.setTextColor(Color.RED);
limitLineL.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);//标签位置
limitLineL.enableDashedLine(5f,8f,0); //设置虚线
lineChart.getAxisLeft().addLimitLine(limitLineL);
LimitLine limitLine2 = new LimitLine(14.5f, "SD");//临界点
limitLine2.setLineColor(Color.RED);
limitLine2.setLineWidth(1.5f);
limitLine2.setTextSize(10f);
limitLine2.setTextColor(Color.RED);
limitLine2.setLabelPosition(LimitLine.LimitLabelPosition.RIGHT_TOP);//标签位置
limitLine2.enableDashedLine(5f,8f,0); //设置虚线
lineChart.getAxisLeft().addLimitLine(limitLine2);
//折线图点的标记
MyMarkerView mv = new MyMarkerView(this);
lineChart.setMarker(mv);
LineDataSet dataSet = new LineDataSet(entries, "Label"); // 添加数据
// 自定义各种数据样式（不设置则使用默认值）
// dataSet.setColor(...);
// dataSet.setValueTextColor(...);
LineData lineData = new LineData(dataSet);
//多个折线时使用
// LineDataSet lineDataSet = new LineDataSet(entries,"ONE");
// LineDataSet lineDataSet2 = new LineDataSet(entries,"TWO");
// //保存LineDataSet集合
// ArrayList<ILineDataSet> dataSets = new ArrayList<>();
// dataSets.add(lineDataSet); // add the datasets
// dataSets.add(lineDataSet2); // add the datasets
// LineData lineDataLists = new LineData(dataSets);//添加多个折线集合
// dataSet.setColor(Color.RED);//设置折线的颜色
dataSet.setCircleSize(5f);// 显示的圆形大小
dataSet.setCircleColor(Color.RED);//设置圆点的颜色
//设置曲线值的圆点是实心还是空心
dataSet.setDrawCircleHole(true);
dataSet.setDrawFilled(true);//设置不画数据覆盖的阴影层
// dataSet.setDrawValues(false);//不绘制线的数据
// dataSet.setLineWidth(2f);//设置折线宽度
// dataSet.setCircleRadius(6f);
// 填充曲线下方的区域，红色，半透明。
dataSet.setDrawFilled(true);
dataSet.setFillAlpha(65);
// dataSet.setFillColor(Color.WHITE);
// dataSet.setDrawCircleHole(false);
dataSet.setDrawCircles(true);//是否显示圆心
dataSet.setValueTextColor(Color.rgb(89, 194, 230)); //数值显示的颜色
dataSet.setValueTextSize(8f); //数值显示的大小
// 设置平滑曲线
// dataSet.setMode(LineDataSet.Mode.CUBIC_BEZIER);
lineChart.setData(lineData);
// lineChart.animateX(2000);
lineChart.invalidate(); // 刷新
// Matrix m = new Matrix();
// m.postScale(1, 1f);//两个参数分别是x,y轴的缩放比例。例如：将x轴的数据放大为之前的1.5倍，《这个地方是在设置能滑动的时候编辑的，假如X轴最多展示5条但是呢有10条数据，那么这里就是2,1》
lineChart.getViewPortHandler().refresh(new Matrix(),lineChart,true);//将图表动画显示之前进行缩放
}
/**
// * 更新图表
// *
// * @param chart 图表
// * @param values 数据
// * @param valueType 数据类型
// */
// public static void notifyDataSetChanged(LineChart chart, List<Entry> values,
// final int valueType) {
// chart.getXAxis().setValueFormatter(new IAxisValueFormatter() {
// @Override
// public String getFormattedValue(float value, AxisBase axis) {
// return weeks(valueType)[(int) value];
// }
// });
//
// chart.invalidate();
setChartData(chart, values);
// }<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart"
android:layout_width="match_parent"
android:layout_height="300dp"
android:padding="10dp" />
3.自定义MarkerView显示视图：
import android.content.Context;
import android.text.format.DateFormat;
import android.widget.TextView;
import com.github.mikephil.charting.components.MarkerView;
import com.github.mikephil.charting.data.Entry;
import com.github.mikephil.charting.highlight.Highlight;
import com.github.mikephil.charting.utils.MPPointF;
import java.text.DecimalFormat;
public class MyMarkerView extends MarkerView
{
private TextView tvContent;
private DecimalFormat format = new DecimalFormat("##0");
public MyMarkerView(Context context) {
super(context, R.layout.layout_markerview);//这个布局自己定义
tvContent = (TextView) findViewById(R.id.tvContent);
}
//显示的内容
@Override
public void refreshContent(Entry e, Highlight highlight) {
// tvContent.setText(format(e.getX())+"\n"+format.format(e.getY())+"辆");
tvContent.setText(format.format(e.getY())+"辆");
super.refreshContent(e, highlight);
}
//标记相对于折线图的偏移量
@Override
public MPPointF getOffset() {
return new MPPointF(-(getWidth() / 2), -getHeight());
}
//时间格式化（显示今日往前30天的每一天日期）
public String format(float x)
{
CharSequence format = DateFormat.format("MM月dd日",
System.currentTimeMillis()-(long) (30-(int)x)*24*60*60*1000);
return format.toString();
}
}4.MarkerView布局：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:background="@drawable/bg_shape_c"
android:layout_width="match_parent"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="6dp"
android:paddingBottom="6dp"
android:layout_height="wrap_content">
<TextView
android:id="@+id/tvContent"
android:text="KING"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>5.背景色：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#fff" />
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<stroke android:width="1dp" android:color="@color/colorPrimaryDark"></stroke>
</shape><color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryDark">#303F9F</color>
<color name="colorAccent">#FF4081</color>
<color name="transparent_gray_light">#89000000</color>
<color name="white">#fff</color>
<color name="split_line2">#333</color>
<color name="divider">#ffd2d2d2</color>
<color name="light_green_900">#33691E</color>
<color name="purple_500">#9C27B0</color>
<color name="pink_500">#FF4081</color>
<color name="orange_500">#FF9800</color>
<color name="cyan_500">#00BCD4</color>
<color name="yellow_900">#F57F17</color>
<color name="item_bg">#454545</color>
<color name="item_bg_pressed">#707070</color>
<color name="green">#00ff00</color>
<color name="dark">#FF222222</color>
<color name="light">#FFEEEEEE</color>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
