MPAndroidChart MarkerView如何获取经过CustomValueFormatter后的X数据

由于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);

写的有点混乱，将就看看，希望能够对需要的朋友有帮助！