admin管理员组文章数量:1654422
上一篇文章 [MD]模仿百度手机助手动态折线图 介绍了使用HelloChart模拟百度手机助手动态折线图的方法,接下来我们使用大家都比较熟悉的MPAndroidChart来实现同样的效果,之所以用MPChart,是因为MPAndroidChart内部已经封装了我们需要的动态效果,这个我们之后会详细介绍
实现的效果如下:
设置 折线图样式(折线,图例,坐标轴等)
void initLineChart() {
mChart = (LineChart) findViewById(R.id.chart1);
mChart.setOnChartGestureListener(this);
mChart.setOnChartValueSelectedListener(this);
mChart.setDrawGridBackground(false);
//set the description text
mChart.setDescription("MPLineChart");
mChart.setNoDataTextDescription("You need to provide data for the chart.");
// enable touch gestures
mChart.setTouchEnabled(true);
// enable scaling and dragging
mChart.setDragEnabled(true);
mChart.setScaleEnabled(true);
mChart.setHighlightPerDragEnabled(true);
mChart.setPinchZoom(true);
XAxis xAxis = mChart.getXAxis();
xAxis.setEnabled(true);
YAxis leftAxis = mChart.getAxisLeft();
leftAxis.removeAllLimitLines(); // reset all limit lines to avoid overlapping lines
leftAxis.setAxisMaxValue(90f);
leftAxis.setAxisMinValue(0f);
leftAxis.setLabelCount(6, false);
leftAxis.setStartAtZero(false);
mChart.getAxisRight().setEnabled(false);
Legend l = mChart.getLegend();
l.setForm(Legend.LegendForm.LINE);
}
初始化X和Y两个Arraylist
ArrayList<String> xVals = new ArrayList<String>();
for (int i = 0; i < count; i++) {
xVals.add((i) + "");
}
ArrayList<Entry> yVals = new ArrayList<Entry>();
for (int i = 0; i < count; i++) {
float mult = (range + 1);
float val = (float) (Math.random() * mult) + 3;// + (float)
yVals.add(new Entry(val, i));
}
根据采样值(Y值)生成DataSet并设置折线图的样式
// create a dataset and give it a type
LineDataSet set1 = new LineDataSet(yVals, "DataSet 1");
set1.setDrawCircles(true);
set1.setColor(ColorTemplate.getHoloBlue());
set1.setAxisDependency(YAxis.AxisDependency.LEFT);
set1.setColor(ColorTemplate.getHoloBlue());
set1.setCircleColor(Color.WHITE);
set1.setLineWidth(2f);
set1.setCircleSize(3f);
set1.setFillAlpha(65);
set1.setFillColor(ColorTemplate.getHoloBlue());
set1.setHighLightColor(Color.rgb(244, 117, 117));
set1.setDrawCircleHole(false);
将该LineDataSet加入DataSets集合
ArrayList<LineDataSet> dataSets = new ArrayList<LineDataSet>();
dataSets.add(set1); // add the datasets
根据该DataSets以及X值生成data对象(LineData)
// create a data object with the datasets
LineData data = new LineData(xVals, dataSets);
使用 LinChart.setData(LineData) 填充图标
// set data
mChart.setData(data);
使用LineChart.animateX/animateY/animateXY 制作动画
<span style="white-space:pre"> </span>mChart.animateX(3000);
关于动画效果,可以参考下 MPAndroidChart 教程:动画 写的很详细
相关API 可以参考GitHub上相关wiki : MPAndroidChart-Wiki , 中文版: MPAndroidChart-Wiki-CN
另外,我也整理了下比较常用的 :
LineChart
setOnChartGestureListener // 设置表格上动作监听并进行回调
setOnChartValueSelectedListener // 设置表格上的点被点击的回调函数
setDrawGridBackground // 是否显示表格颜色
setDescription // 数据描述
setNoDataTextDescription // 数据为空时描述
setScaleEnabled // 是否可以缩放
setDragEnabled // 是否可以拖拽
setHighlightPerDragEnabled // 能否拖拽高亮线(数据点与坐标的提示线)
setPinchZoom // 是否按X/Y按比例缩放,如果为false,X/Y可以分别缩放
getXAxis // 获取X轴
getYAxis // 获取Y轴
getLegend // 获取图例
animateX // X轴方向动画
animateY // Y轴方向动画
setData(LineData) // 设置数据
notifyDataSetChanged // 数据更新提示
setVisibleXRangeMaximum // 设置最大X轴显示范围
moveViewToX // X轴方向移动
XAxis/YAxis
removeAllLimitLines // 移除所有限制线,防止重叠
setLabelCount // 坐标轴上标签显示的个数
setStartAtZero // 坐标轴是否从0开始
LineDataSet
setDrawCircles // 设置节点为圆形
etCircleColor // 设置圆形节点颜色
setCircleSize // 设置圆形节点大小
setColor // 设置折线颜色
setAxisDependency // 以左边坐标轴为准 还是以右边坐标轴为基准
setLineWidth // 设置折线宽度
setFillAlpha // 设置填充Alpha值
setDrawFilled // 设置是否填充
setFillColor // 设置填充的颜色
setHighLightColor // 设置高亮线的颜色
setDrawCircleHole // 设置节点是否为同心圆
setCircleColorHole // 设置节点同心圆内部的颜色
setDrawCubic // 设置折线是否顺滑
LineDate
addDataSet // 添加LineDataSet到LineData中
addXValue // 添加X轴坐标到LineData中
addEntry // 添加坐标值(X,Y)到LineData中
Legend
setForm // 设置图例样式
相关代码下载,请 点击
版权声明:本文标题:[MD]模仿百度手机助手动态折线图MPAndroidCharts实现(一) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729658662a1209464.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论