MPAndroidChart折线图(LineChart)的使用,可以左右滑动
折线图实现渐变的补丁,直接跟着这个补丁实现就可以实现家变
楼主就不把修改的代码贴出来了,上面这个补丁讲的很清楚,^_^。
我上一篇的折线图
来看看效果
LineChart的使用可以看看别写的demo,这里列举一下我项目中用到的方法,大概可以解决我们碰到的基本需求。我们在使用的时候,可能会碰到服务器返回的数据不是我们想要的格式,就要我们自己去封装,^_^。
- 设置简单的属性
private void setChartProperties() {
//设置描述文本不显示
mLineChart.getDescription().setEnabled(false);
//设置是否显示表格背景
mLineChart.setDrawGridBackground(true);
//设置是否可以触摸
mLineChart.setTouchEnabled(true);
mLineChart.setDragDecelerationFrictionCoef(0.9f);
//设置是否可以拖拽
mLineChart.setDragEnabled(true);
//设置是否可以缩放
mLineChart.setScaleEnabled(false);
mLineChart.setDrawGridBackground(false);
mLineChart.setHighlightPerDragEnabled(true);
mLineChart.setPinchZoom(true);
//设置背景颜色
mLineChart.setBackgroundColor(ColorAndImgUtils.CHART_BACKGROUND_COLOR);
//设置一页最大显示个数为6,超出部分就滑动
float ratio = (float) xValueList.size()/(float) 6;
//显示的时候是按照多大的比率缩放显示,1f表示不放大缩小
mLineChart.zoom(ratio,1f,0,0);
//设置从X轴出来的动画时间
//mLineChart.animateX(1500);
//设置XY轴动画
mLineChart.animateXY(1500,1500, Easing.EasingOption.EaseInSine, Easing.EasingOption.EaseInSine);
}
- 设置图例是否显示,这里我们可以隐藏图例,使用ListView或者RecyclerView实现我们需要实现的简答的效果
private void setChartLegend() {
//获取图例对象
Legend legend = mLineChart.getLegend();
//设置图例不显示
legend.setEnabled(false);
}
- 设置MarkView,实现我们想要的效果
private void setChartMarkView() {
CustomMarkView mv = new CustomMarkView(getActivity(), R.layout.line_chart_custom_marker_view);
// For bounds control
mv.setChartView(mLineChart);
// Set the marker to the chart
mLineChart.setMarker(mv);
}
- 设置X轴
private void setChartXAxis(int position) {
ArrayList<String> list = getList(position);
//自定义设置横坐标
IAxisValueFormatter xValueFormatter = new FastBrowserXValueFormatter(list);
//X轴
XAxis xAxis = mLineChart.getXAxis();
//设置线为虚线
//xAxis.enableGridDashedLine(10f, 10f, 0f);
//设置字体大小10sp
xAxis.setTextSize(10f);
//设置X轴字体颜色
xAxis.setTextColor(ColorAndImgUtils.FAST_BW_TEXT_COLOR);
//设置从X轴发出横线
xAxis.setDrawGridLines(true);
xAxis.setGridColor(ColorAndImgUtils.GRID_COLOR);
//设置网格线宽度
xAxis.setGridLineWidth(1);
//设置显示X轴
xAxis.setDrawAxisLine(true);
//设置X轴显示的位置
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
//设置自定义X轴值
xAxis.setValueFormatter(xValueFormatter);
//一个界面显示6个Lable,那么这里要设置11个
xAxis.setLabelCount(6);
//设置最小间隔,防止当放大时出现重复标签
xAxis.setGranularity(1f);
//设置为true当一个页面显示条目过多,X轴值隔一个显示一个
xAxis.setGranularityEnabled(true);
//设置X轴的颜色
xAxis.setAxisLineColor(ColorAndImgUtils.GRID_COLOR);
//设置X轴的宽度
xAxis.setAxisLineWidth(1f);
mLineChart.invalidate();
}
- 设置Y轴
private void setChartYAxis() {
YAxis leftAxis = mLineChart.getAxisLeft();
//设置从Y轴发出横向直线(网格线)
leftAxis.setDrawGridLines(true);
//设置网格线的颜色
leftAxis.setGridColor(ColorAndImgUtils.GRID_COLOR);
//设置网格线宽度
leftAxis.setGridLineWidth(1);
//设置Y轴最小值是0,从0开始
leftAxis.setAxisMinimum(0f);
leftAxis.setGranularityEnabled(true);
//设置最小间隔,防止当放大时出现重复标签
leftAxis.setGranularity(1f);
//如果沿着轴线的线应该被绘制,则将其设置为true,隐藏Y轴
leftAxis.setDrawAxisLine(false);
leftAxis.setDrawZeroLine(false);
leftAxis.setTextSize(10f);
leftAxis.setTextColor(ColorAndImgUtils.FAST_BW_TEXT_COLOR);
//设置左边X轴显示
leftAxis.setEnabled(true);
//设置Y轴的颜色
leftAxis.setAxisLineColor(ColorAndImgUtils.GRID_COLOR);
//设置Y轴的宽度
leftAxis.setAxisLineWidth(1f);
YAxis rightAxis = mLineChart.getAxisRight();
//设置右边Y轴不显示
rightAxis.setEnabled(false);
}
- 设置整个图表的Y值,Y轴的值,和X轴Y轴对应的值
private void setData(ArrayList<String> xValueList, ArrayList<Integer> yValueList) {
ArrayList<Entry> yValues = new ArrayList<>();
for(int i=0;i<xValueList.size();i++){
yValues.add(new Entry(i,yValueList.get(i)));
}
LineDataSet set;
if(mLineChart.getData() != null && mLineChart.getData().getDataSetCount() > 0){
set = (LineDataSet) mLineChart.getData().getDataSetByIndex(0);
set.setValues(yValues);
mLineChart.getData().notifyDataChanged();
mLineChart.notifyDataSetChanged();
}else{
//设置值给图表
set = new LineDataSet(yValues, "");
//设置图标不显示
set.setDrawIcons(false);
//设置Y值使用左边Y轴的坐标值
set.setAxisDependency(YAxis.AxisDependency.LEFT);
//设置线的颜色
set.setColors(ColorAndImgUtils.ONE_COLOR);
//设置数据点圆形的颜色
set.setCircleColor(ColorAndImgUtils.ONE_COLOR);
//设置填充圆形中间的颜色
set.setCircleColorHole(ColorAndImgUtils.ONE_COLOR);
//设置折线宽度
set.setLineWidth(1f);
//设置折现点圆点半径
set.setCircleRadius(4f);
//设置十字线颜色
//set.setHighLightColor(Color.parseColor("#47DBCC"));
//设置显示十字线,必须显示十字线,否则MarkerView不生效
set.setHighlightEnabled(true);
//设置是否在数据点中间显示一个孔
set.setDrawCircleHole(false);
//设置填充
//设置允许填充
set.setDrawFilled(true);
set.setFillAlpha(50);
//设置背景渐变
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2){
//设置渐变
Drawable drawable = ContextCompat.getDrawable(getActivity(), R.drawable.line_chart_gradient);
set.setFillDrawable(drawable);
}else {
set.setFillColor(ColorAndImgUtils.ONE_COLOR);
}
LineData data = new LineData(set);
//设置不显示数据点的值
data.setDrawValues(false);
mLineChart.setData(data);
mLineChart.invalidate();
}
}
最后的结果,单个折线图
多个图表不同的地方就是设置值的地方处理不同
private void setData(ArrayList<String> xValueList, ArrayList<ArrayList<Integer>> allYValueList, ArrayList<String> nameList) {
mLineChart.resetTracking();
ArrayList<ILineDataSet> dataSets = new ArrayList<ILineDataSet>();
for (int z = 0; z < nameList.size(); z++) {
ArrayList<Entry> values = new ArrayList<Entry>();
for (int i = 0; i < xValueList.size(); i++) {
values.add(new Entry(i, allYValueList.get(z).get(i)));
}
LineDataSet set = new LineDataSet(values, nameList.get(z));
set.setDrawIcons(false);//设置图标不显示
set.setAxisDependency(YAxis.AxisDependency.LEFT);//设置Y值使用左边Y轴的坐标值
int color = ColorAndImgUtils.ALL_COLORS[z % ColorAndImgUtils.ALL_COLORS.length];
set.setColor(color);
set.setCircleColor(color);//设置数据点颜色
set.setCircleColorHole(color);//设置数据点中间填充颜色
set.setLineWidth(1f);
set.setCircleRadius(4f);
set.setHighlightEnabled(true);//设置是否显示十字线
set.setDrawCircleHole(false);//设置是否在数据点中间显示一个孔
dataSets.add(set);
}
LineData data = new LineData(dataSets);
data.setDrawValues(false);//设置不显示数据点
mLineChart.setData(data);
mLineChart.invalidate();
}