MPAndroidChart - LineChart使用并踩坑
·
MPAndroidChart是Android的一个比较优秀的图表控件,今天来说一下在使用MPAndroidChart折线图控件LineChart的使用方法和所遇到的问题。
使用方法:
第一步:
在app的gradle中添加 compile ‘com.github.PhilJay:MPAndroidChart:v3.1.0-alpha’
第二步
创建布局代码,下面只给一个代码片段
<com.github.mikephil.charting.charts.LineChart
android:id="@+id/chart"
android:layout_width="match_parent"
android:layout_height="400px"
android:background="@color/colorPrimary" />
第三步
在你的Activity或者Fragment中findViewById找到它,并设置各种你需要的属性,配置可以见我的代码;
//数据源
List<Entry> entries = new ArrayList<>();
float taotalKm = 0.0f;
for (int i = 0; i < mList.size(); i++) {
StatisticsPositionEntity statisticsPositionEntity = mList.get(i);
entries.add(new Entry(i, Float.parseFloat(statisticsPositionEntity.getMileageDay())));
taotalKm += Float.parseFloat(statisticsPositionEntity.getMileageDay());
}
tvMean.setText((int) (taotalKm / day) + "km");
LineDataSet dataSet = new LineDataSet(entries, "");
//线条颜色
dataSet.setColor(getMyColor(R.color.white));
//圆点颜色
dataSet.setCircleColor(getMyColor(R.color.white));
//线条宽度
dataSet.setLineWidth(1f);
/*————————————————设置样式——————————————*/
//设置图表右边的y轴禁用,不显示右侧的Y轴
YAxis rightAxis = mLineChart.getAxisRight();
rightAxis.setEnabled(false);
//设置左边Y轴的样式
YAxis axisLeft = mLineChart.getAxisLeft();
//设置字体颜色
axisLeft.setTextColor(getMyColor(R.color.white));
//在这里对拿到的值进行处理,图表的数据源是float的,你可以做你需要的处理
axisLeft.setValueFormatter(new IAxisValueFormatter() {
@Override
public String getFormattedValue(float value, AxisBase axis) {
return ((int) value) + "km";
}
});
//设置x轴
XAxis xAxis = mLineChart.getXAxis();
//设置字体颜色
xAxis.setTextColor(getMyColor(R.color.white));
//设置字体大小
xAxis.setTextSize(11f);
xAxis.setAxisMinimum(0f);
//是否绘制轴线
xAxis.setDrawAxisLine(true);
//设置x轴上每个点对应的线
xAxis.setDrawGridLines(false);
//绘制标签 指x轴上的对应数值
xAxis.setDrawLabels(true);
//设置x轴的显示位置
xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
//禁止放大后x轴标签重绘
xAxis.setGranularity(1f);
//准备好每个点对应的x轴数值
List<String> list = new ArrayList<>();
for (int i = 0; i < mList.size(); i++) {
StatisticsPositionEntity entity = mList.get(i);
Date date = DateUtils.formatDate(entity.getCreateDate());
list.add(DateUtils.format(date, "MM-dd"));
}
xAxis.setValueFormatter(new IndexAxisValueFormatter(list));
//设置一页最大显示个数为6,超出部分就滑动
float ratio = (float) list.size() / (float) 10;
if (ratio < 1) {
ratio = 1.0f;
}
//显示的时候是按照多大的比率缩放显示,1f表示不放大缩小
//着重说明一下下面代码的用途
/**
* 先将缩放比设置成0后,再去设置你想要的缩放比。
* 若不这样做的话,在当前页面重新加载数据时,你所设置的缩放比会失效,并且出现你意向不到的显示问题。
* 如果你的图表只在页面加载一次的话不需要这么做。
*/
mLineChart.zoom(0f, 1f, 0, 0);
mLineChart.zoom(ratio, 1f, 0, 0);
//设置为不可缩放
mLineChart.setScaleEnabled(false);
//设置为可左右滑动
mLineChart.setDragEnabled(true);
//透明化图例
Legend legend = mLineChart.getLegend();
legend.setForm(Legend.LegendForm.NONE);
legend.setTextColor(Color.WHITE);
//隐藏x轴描述
Description description = new Description();
description.setEnabled(false);
mLineChart.setDescription(description);
//添加覆盖物
DetailsMarkerView markerView = new DetailsMarkerView(mActivity, R.layout.chart_show_tag_layout);
markerView.setChartView(mLineChart);
mLineChart.setMarker(markerView);
/*————————————————样式设置结束——————————————*/
//将点的数据添加到图标中并绘制
LineData lineData = new LineData(dataSet);
lineData.setDrawValues(false);
mLineChart.setData(lineData);
mLineChart.invalidate();
设置的东西可能有一点多,大家可把我设置样式的一部分剔除出去先看一下效果,需要的可以再加上,给大家看一下效果图。
默认的图表是四边都有刻度的,所以你不想要其他边的话可以通过代码去掉,使用方法就介绍到这里。
下面来给大家说一个我在使用时遇到的bug,大家能看到我的页面右上角有一个 ‘一周内’ 的东西,这个是用来做检索的可以选择 一个月、三个月、半年、一年、自定以等,搜索完后重新加载页面数据。
但是在重新加载数据的时候,图表的缩放比出问题了,本来应该一屏显示10个点,超过十个点的需要向右滑动才能看到,出问题后一页显示不了10个了,你继续进行检索选择 半年或者一年甚至一屏都显示不了一个点了。
上面是bug的表现,下面说一下我的解决方法,直接上代码;
/**
* 先将缩放比设置成0后,再去设置你想要的缩放比。
* 若不这样做的话,在当前页面重新加载数据时,你所设置的缩放比会失效,并且出现你意向不到的显示问题。
* 如果你的图表只在页面加载一次的话不需要这么做。
*/
mLineChart.zoom(0f, 1f, 0, 0);
mLineChart.zoom(ratio, 1f, 0, 0);
这样就行了,嗯嗯,再见。
更多推荐
已为社区贡献1条内容
所有评论(0)