由于Entry的x、y值都为float类型,当MPAndroidChart的X轴为比较特殊时,如2017年5月4日、Feb,我们就需要使用IAxisValueFormatter来转换后做显示
创建一个CustomValueFormatter
public class CustomValueFormatter implements IAxisValueFormatter {
private List<String> mValues;
public XTextFormatter(List<String> mValues) {
this.mValues = mValues;
}
//这里这个方法通过传入的index来索引mValues里面的值,也就是字符串
@Override
public String getFormattedValue(float value, AxisBase axis) {
return mValues.get((int) value);
}
}
构建数据
……
……
List<String> xList = new ArrayList<>();
List<Float> yList = new ArrayList<>();
for (int i = 1; i < 13; i++) {
xList.add(i+"月");
yList.add(i*100f);
}
CustomValueFormatter valueFormatter = new CustomValueFormatter(xList);
List<Entry> entries = new ArrayList<>();
for (int i = 0; i < xList.size(); i++) {
//注意这里传入的不是x的值,而是i的值,这里的i是index
entries.add(new Entry(i, yList.get(i)));
}
LineDataSet dataSet = new LineDataSet(entries, "");
LineData linedata = new LineData(dataSet);
chart.setData(linedata);
XAxis xAxis = chart.getXAxis();
//在这里将formatter传入
xAxis.setValueFormatter(valueFormatter);
……
……
这样我们就可以让X轴显示的是文本消息了;
但是这样当我们用markerView的时候就显示的x就是上面传入的index而不是我们,我们先来看看我们makerView的代码
创建一个CustomMakerView
public class CustomMakerView extends MarkerView {
private final TextView mContentTv;
/**
* Constructor. Sets up the MarkerView with a custom layout resource.
*
* @param context
* @param layoutResource the layout resource to use for the MarkerView
*/
public CustomMakerView(Context context, int layoutResource) {
super(context, layoutResource);
mContentTv = (TextView) findViewById(R.id.tv_content_marker_view);
}
//markerView出现时可以在这里获取值,但是这里的e.getX()是上面的index
@Override
public void refreshContent(Entry e, Highlight highlight) {
mContentTv.setText(String.valueOf(e.getX()+","+e.getY()));
super.refreshContent(e, highlight);
}
}
将marker放到chart上
//这里的布局文件很简单,就一个textView就不放代码了
CustomMakerView customMakerView = new CustomMakerView(this, R.layout.layout_marker);
chart.setMarker(customMakerView);
这个时候我们点击每个点都可以出现markerView,但是我们发现markerView的x值为上面我们传入的index,而不是我们想的1~12月,怎么办呢?
由于我们是继承的MarkerVIew,通过阅读代码发现了getChartView()这个方法,理论上我们可以通过chart获取到X轴,然后再通过X轴获取到Formatter,所以经过修改后的CustomMakerView的代码如下:
public class CustomMakerView extends MarkerView {
private final TextView mContentTv;
/**
* Constructor. Sets up the MarkerView with a custom layout resource.
*
* @param context
* @param layoutResource the layout resource to use for the MarkerView
*/
public CustomMakerView(Context context, int layoutResource) {
super(context, layoutResource);
mContentTv = (TextView) findViewById(R.id.tv_content_marker_view);
}
@Override
public void refreshContent(Entry e, Highlight highlight) {
XAxis xAxis = getChartView().getXAxis();
XTextFormatter formatter = (XTextFormatter) xAxis.getValueFormatter();
String realX = formatter.getFormattedValue(e.getX(),xAxis);
mContentTv.setText(realX+","+String.valueOf(e.getY()));
super.refreshContent(e, highlight);
}
@Override
public MPPointF getOffset() {
MPPointF mpPointF = new MPPointF(-getWidth(),-getHeight());
return mpPointF;
}
}
看到这里基本大功告成了,但是会出空指针异常,排查发现因为MarkerView并没有持有chart的对象……,于是在添加markerView的地方加上这样一句
customMakerView.setChartView(chart);
写的有点混乱,将就看看,希望能够对需要的朋友有帮助!