**APP为了能让用户对数据有更直观,更便捷的认识,我们通常都选择了以图表的方式展示给用户,如折线图、饼图、条形图等…今天和大家分享下MPAndroidChart,一个强大便捷的图标控件。
Android MPAndroidChart之饼图PieChart
Android MPAndroidChart之柱状图BarChart
Android MPAndroidChart之组合图(折线图+柱状图)CombinedChart
本篇我们分享下饼状图LineChart的使用**
>>>>先贴张效果图<<<<
第一步,添加依赖
//曲线图 饼状图 折线图
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
第二步,添加布局
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/lineChart"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginBottom="25dp"
android:padding="20dp" />
第三步设置属性
var mPointValues = ArrayList<PointValue>();
var mPointValues = ArrayList<PointValue>();
var mAxisXValues = ArrayList<AxisValue>();
internal var date = arrayOf("日", "一", "二", "三", "四", "五", "六")
internal var score = intArrayOf(5, 7, 6, 7, 3, 5, 1)//图表的数据点
/**
* 设置X 轴的显示
*/
fun getAxisXLables() {
for (i in 0..date.size - 1) {
mAxisXValues.add(AxisValue(i.toFloat()).setLabel(date[i]))
}
}
/**
* 图表的每个点的显示
*/
fun getAxisPoints() {
for (i in 0..score.size - 1) {
mPointValues.add(PointValue(i.toFloat(), score[i].toFloat()))
}
}
fun initLineChart() {
var line = Line(mPointValues).setColor(Color.YELLOW); //折线的颜色(橙色)
var lines = ArrayList<Line>();
var line_t = Line(mPointValues_t).setColor(Color.GREEN);
line.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状 这里是圆形 (有三种 :ValueShape.SQUARE ValueShape.CIRCLE ValueShape.DIAMOND)
line.setCubic(true);//曲线是否平滑,即是曲线还是折线
line.setFilled(false);//是否填充曲线的面积
line.setHasLabels(true);//曲线的数据坐标是否加上备注
line.setStrokeWidth(1)
line.setPointRadius(2)
line.setPointColor(getResources().getColor(R.color.tm))
// line.setHasLabelsOnlyForSelected(true);//点击数据坐标提示数据(设置了这个line.setHasLabels(true);就无效)
line.setHasLines(true);//是否用线显示。如果为false 则没有曲线只有点显示
line.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示(每个数据点都是个大的圆点)
line_t.setShape(ValueShape.CIRCLE);//折线图上每个数据点的形状 这里是圆形 (有三种 :ValueShape.SQUARE ValueShape.CIRCLE ValueShape.DIAMOND)
line_t.setCubic(true);//曲线是否平滑,即是曲线还是折线
line_t.setFilled(false);//是否填充曲线的面积
line_t.setHasLabels(true);//曲线的数据坐标是否加上备注
line_t.setStrokeWidth(1)
line_t.setPointRadius(2)
line_t.setPointColor(getResources().getColor(R.color.tm))
// line.setHasLabelsOnlyForSelected(true);//点击数据坐标提示数据(设置了这个line.setHasLabels(true);就无效)
line_t.setHasLines(true);//是否用线显示。如果为false 则没有曲线只有点显示
line_t.setHasPoints(true);//是否显示圆点 如果为false 则没有原点只有点显示
lines.add(line)
lines.add(line_t)
var data: LineChartData = LineChartData();
data.setLines(lines);
//坐标轴
var axisX: Axis = Axis(); //X轴
axisX.setHasTiltedLabels(false); //X坐标轴字体是斜的显示还是直的,true是斜的显示
axisX.setTextColor(Color.BLACK); //设置字体颜色
//axisX.setName("date"); //表格名称
axisX.setTextSize(10);//设置字体大小
axisX.setMaxLabelChars(7); //最多几个X轴坐标,意思就是你的缩放让X轴上数据的个数7<=x<=mAxisXValues.length
axisX.setValues(mAxisXValues); //填充X轴的坐标名称
//data.setAxisXBottom(axisX); //x 轴在底部
data.setAxisXTop(axisX); //x 轴在顶部
axisX.setHasLines(false); //x 轴分割线
axisX.setMaxLabelChars(2)
// Y轴是根据数据的大小自动设置Y轴上限(在下面我会给出固定Y轴数据个数的解决方案)
// var axisY: Axis = Axis(); //Y轴
// axisY.setName("");//y轴标注
// axisY.setTextSize(1);//设置字体大小
//data.setAxisYLeft(axisY); //Y轴设置在左边
//data.setAxisYRight(axisY); //y轴设置在右边
//设置行为属性,支持缩放、滑动以及平移
lineChart.setInteractive(true);
lineChart.setZoomType(ZoomType.HORIZONTAL);
lineChart.setMaxZoom(1.toFloat());//最大方法比例
lineChart.setContainerScrollEnabled(true, ContainerScrollType.HORIZONTAL);
lineChart.setLineChartData(data);
lineChart.setVisibility(View.VISIBLE);
/**注:下面的7,10只是代表一个数字去类比而已
* 当时是为了解决X轴固定数据个数。见(http://forum.xda-developers.com/tools/programming/library-hellocharts-charting-library-t2904456/page2);
*/
var v: Viewport = Viewport(lineChart.getMaximumViewport());
v.left = 0.toFloat();
v.right = 7.toFloat();
lineChart.setCurrentViewport(v);
}