MPAndroidChart的LineChart(折线图)的个⼈学习经验本⼈学习MPAndroidChart的经历可以说⼗分坎坷,对于没有什么经验的⼩⽩来说,真的不好⼊⼿,但总的来说其实也不是很难。让我们来略微了解⼀下LineChart(折线图)的基本⽅法吧!
⾸先
第⼀步要使⽤MPAndroidChart这个Android图标库需要导⼊:
两种⽅式:1.导⼊架包2.添加依赖
依赖导⼊
repositories {
maven { url 'jitpack.io' }
}
dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}
然后我们就开始创建UI布局啦!
第⼆步先创建⼀个l的布局⽂件
具体代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="schemas.android/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/linechart_with"
android:layout_width="match_parent"
android:layout_height="400dp"/>
</LinearLayout>
是不是⼗分简单
小白学java有前途吗我们就只需要对这⼀个控件进⾏操作,我的理解就是这个控件就是⼀张画布,可以对画布进⾏⾃由发挥
但是也有⼀定的约束,要发挥它的作⽤实现图表库的作⽤实现数据可视化,⽅便⽤户直观的获取数据。
第三步创建⼀个LineChartActivity.java⽂件
public class LineChartActiviy extends AppCompatActivity {
public LineChart lineChart;
@Override
protected void onCreate(Bundle savedInstanceState) {
setContentView(R.layout.linechartdemo);
lineChart = (LineChart)findViewById(R.id.linechart_with);
}
}
初始化代码
初始化⼀个LineChart对象
到布局⽂件,到对应的id,就可以很快乐的对他进⾏操作啦!
第四步我们来思考⼀下⼀个折线图有啥?数据,折线,座标轴,描述差不过了我们先说单条折线。
第五步我们存数据
数据我们⽤List来存储折线图的数据
我们来说⼀下这个折线图的数据 Entry类型的作⽤就是来存储折线图数据
public Entry(float x, float y) {
super(y);
this.x = x;
}
第⼀个参数 float x,是折线图中数据值的位置索引
第⼆个参数float y,是具体数据值
我们主要传⼊数据的⽤法
创建⼀个List<Entry> mList = new ArrayList<>();存储数据
有存数据的容器了就得把数据存进去
数据来源可以⾃⼰写,⽹络请求获取,json⽂件解析数据等等。
⼀般来说初学者的话就是两种⼿写代码,或者使⽤Random函数⾃动⽣成
各有各的好处,⼿写代码就是很直观,每次的图都⼀样,⽤于测试展⽰都ok,
Random⽣成的数据每次都不⼀样,出来的图也不⼀样,可以⽤来动态⽣成数据。如果需要特别⼀定范围内的数据,⼀点更给⽣成的范围⼀般来说,初学者就⽤⼿写的就练习
private float[] lineFloat = {1,2,3,4,5,6,2,2};
随机给都是可以的
mList.add(new Entry(1f,lineFloat[1]));
创建新的Entry对象接收两个float类型的参数,添加到List中
如果⼀条数据⼀条数据的写真的很⿇烦,但是我们可以使⽤for循环来简化这个过程
for(int i,i<lineFloat.length,i++){
  mList.add(new Entry(i,lineFloat[i]));
}
数据存到列表中了
第六步设置这条折线
初始化这条折线这条折线是⼀个LineDataSet对象
看源码
private List<Integer> mCircleColors = null;
public LineDataSet(List<Entry> yVals, String label) {
super(yVals, label);
// mCircleRadius = vertDpToPixel(4f);
// mLineWidth = vertDpToPixel(1f);
if (mCircleColors == null) {
mCircleColors = new ArrayList<Integer>();
}
mCircleColors.clear();
// default colors
// mColors.b(192, 255, 140));
// mColors.b(255, 247, 140));
mCircleColors.b(140, 234, 255));
}
先看我们需要传⼊两个参数⼀个列表,⼀个String 的Label,
列表我们已经创建好了,就是mList,
Label我们可以理解为这条折线的名字
再看定义的⼀个List<Integer> 对象的mCircleColors
就是给了每个数据点的的颜⾊,默认的⼀个颜⾊
LineDataSet set = new LineDataSet(mList,"等级分布");//初始化这条折线
设置折线的宽度,颜⾊,是否有圆⼼,很多很多,就举例代码样式
set.setLineWidth(3f);//折线的宽度
set.setCircleRadius(3.5f);//数据点的半径
set.setMode();//折线的样式默认为折线,曲线也则改为LineDataSet.Mode.CUBIC_BEZIER
set.setCircleColor(Color.RED);//数据点的颜⾊
set.setDrawFilled(false);//是否对数据点圆⼼进⾏填充
set.setDrawCircleHole(false);//是否数据点圆是否为空⼼圆
set.setColor(Color.RED);//设置折线颜⾊
set.setValueTextSize(10f);//设置显⽰数据的值
⽤到的都在这⾥啦!其他的可以⾃⼰去拓展
第七步管理数据集
初始化⼀个LineData对象,
LineData data = new LineData(set);
然后我们呢看源码
public class LineData extends BarLineScatterCandleBubbleData<ILineDataSet> {
public LineData() {
super();
}
public dataSets) {
super(dataSets);
}
public LineData(List<ILineDataSet> dataSets) {
super(dataSets);
}
}
就这么⼀点没得看哦!
但是都是精华哦!
⾸先我们看有三个构造⽅法分别传⽆参构造,ILineDataSet对象和List<ILineDataSet>
很显然就是把我们设置好的LineDataSet对象给传进去,但是List<ILineDataSet>
说明了折线图不⽌⼀条数据线,所以我们可以再创建数据折线线都当作参数给LineDataSet,以实现折线图中的多条数据接着我们开始设置这个LineData对象
data.setDrawValues(false);//折线上是否绘制数据
data.setValueTextColor(Color.RED);//数据的字体颜⾊
data.setValueTextSize(15f);//数据的字体⼤⼩
我们初级⼀般⽤到的就这三个就够了
其实我们不去设置默认都ok,有需要的再去设置⾃⼰需要的效果
第⼋步 XY轴
⼀个坐标轴可是图表的框架
但是这个框架根据需求,美观性可以选择性的调⽤和设置
我们知道⼀般是两个轴X轴和Y轴
但是再MPAndroidChart中可不⽌,Y轴就有两个
在左边的Y轴我们给他起名(leftYAxis),右边的就是(rightYAxis)
X轴就⼀个但是位置可以设置,上下都可以
定义
XAxis xAxis = XAxis();//初始化X轴
YAxis leftyAxis =AxisLeft();//初始化左边Y轴
YAxis rightyAxis = AxisRight();//初始化右边Y轴
xAxis.setEnabled(true);//是否调⽤x轴
xAxis.setPosition(XAxis.XAxisPosition.TOP);//设置X轴的位置
xAxis.setLabelCount(5);//设置x轴标签的数⽬
xAxis.setTextSize(20f);//设置标签的字体⼤⼩
xAxis.setTextColor(Color.BLUE);//设置标签字体的颜⾊
xAxis.setDrawAxisLine(false);//是否绘制x轴的直线
xAxis.setDrawGridLines(false);//是否画⽹格线
xAxis.setLabelCount(7);//设置X轴的标签数量
/
/xAxis.setAxisMaximum(10f);//设置X轴标签最⼤值
//xAxis.setAxisMinimum(0f);//设置X轴标签最⼩值
XY轴设置都是互通的,当然⽅法也不⽌折线,⽬前⽤到的就是这些,
重点来了
⾃定义坐标轴标签
为什么要⾃定义坐标轴标签?
⽬的是为了满⾜需求,默认的是0,1,2...
很low
我们定义为星期吧七天
public static final String[] week = {"周⼀","周⼆","周三","周五","周六","周⽇"};
7个标签
怎么操作呢??
有个⽅法⾃定义X轴的标签显⽰
xAxis.setValueFormatter(valueFormatter);
看源码
public void setValueFormatter(ValueFormatter f) {
if (f == null)
mAxisValueFormatter = new DefaultAxisValueFormatter(mDecimals);
else
mAxisValueFormatter = f;
}
简单说就是你给的参数是ValueFormatter类型的,为null的时候就给你新建⼀个⾃带的,
不为null就是传的参数
那我们就创建这个CalueFormatter类型
ValueFormatter valueFormatter = new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
return ""+week[(int)value];
}
};
根据参数value来取出List中对应的数据
value⼀定要强转成(int)类型,我们取得是索引;
返回值是String,我们就⽤""+来实现String
到这⾥我们的任务只差最后⼀步
实现图表
lineChart.setData(data);//在UI中绘制图表
看源码
public void setData(T data) {
mData = data;
mOffsetsCalculated = false;
if (data == null) {
return;
}
}
就是绘制图表
如果传⼊的值为null就什么都没有
简简单单⼀⾏,却需要我们给他准备这么多,你的成功可能在旁⼈只能看到最后⼀步,可对你来说却⼤量的准备最后⽔到成⽔渠的成功。第⼀次写博客,分享学习的坎坷。
最后附上源码(两条折线图和运⾏效果)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="schemas.android/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/linechart_with"
android:layout_width="match_parent"
android:layout_height="400dp"/>
</LinearLayout>
public class LineChartActiviy extends AppCompatActivity {
public LineChart lineChart;
public static int[] moreline = {22,24,25,25,25,22};
public static int[] lessline = {14,15,16,17,16,16};
public static final String[] week = {"昨天","今天","明天","周五","周六","周⽇"};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
setContentView(R.layout.linechartdemo);
lineChart = (LineChart)findViewById(R.id.linechart_with);
setData(lineChart);
}
public static void setData(LineChart lineChart) {
List<Entry> list = new ArrayList<>();
List<Entry> list2 = new ArrayList<>();
for (int i = 0; i < moreline.length; i++) {
list.add(new Entry((float)i,moreline[i]));
list2.add(new Entry((float)i,lessline[i]));
}
LineDataSet set = new LineDataSet(list,"");
LineDataSet set2 = new LineDataSet(list2,"");
Description description = Description();
description.setEnabled(false);
lineChart.setDescription(description);
set.setLineWidth(3f);
set.setCircleRadius(3.5f);
set.setMode(LineDataSet.Mode.CUBIC_BEZIER);
set.setCircleColor(Color.RED);
set.setDrawFilled(false);
set.setDrawCircleHole(false);
set.setColor(Color.RED);
set.setValueTextSize(10f);
//set2.setDrawCircleHole(true);
set2.setLineWidth(3f);
set2.setCircleRadius(3.5f);
set2.setMode(LineDataSet.Mode.CUBIC_BEZIER);
set2.setCircleColor(Color.BLUE);
set2.setDrawFilled(false);
set2.setDrawCircleHole(false);
set2.setColor(Color.BLUE);
set2.setValueTextSize(10f);
LineData data = new LineData(set,set2);
data.setDrawValues(false);
data.setValueTextColor(Color.RED);
data.setValueTextSize(15f);
XAxis xAxis = XAxis();
xAxis.setEnabled(true);
xAxis.setPosition(XAxis.XAxisPosition.TOP);
xAxis.setLabelCount(5);
xAxis.setTextSize(20f);
xAxis.setTextColor(Color.BLUE);
xAxis.setDrawAxisLine(false);
xAxis.setDrawGridLines(false);
xAxis.setAxisMaximum(10f);
xAxis.setAxisMinimum(0f);
xAxis.setLabelCount(7);
ValueFormatter valueFormatter = new ValueFormatter() {
@Override
public String getFormattedValue(float value) {
return ""+week[(int)value];
}
};
xAxis.setValueFormatter(valueFormatter);
YAxis leftyAxis =AxisLeft();
leftyAxis.setDrawAxisLine(false);
leftyAxis.setLabelCount(4);
leftyAxis.setDrawLabels(false);
YAxis rightyAxis = AxisRight();
rightyAxis.setEnabled(false);
lineChart.setData(data);
}
}
本⽂如果在观看的过程中看到错误
和缺漏的,请与我来联系我很感谢!我表⽰感谢您能来看我的⽂章!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。