MpChart使用

  需要开发一些图形绘制相关的UI；
  经过对比，MpChart是一款相对成熟的第三方库。通过使用这个库以及修改源码，UI功能以及完成。其中包括绘制折线图和柱形图，做此记录，方便以后使用参考。

1.XAxis

图形的X轴：

    XAxis xAxis = mChart.getXAxis();

1.1 设置X轴位置( TOP, BOTTOM, BOTH_SIDED, TOP_INSIDE, BOTTOM_INSIDE)

    xAxis.setPosition(XAxis.XAxisPosition.TOP);       
    xAxis.setPosition(XAxis.XAxisPosition.TOP_INSIDE);   // 在X轴内

1.2 设置X轴的长度

    xAxis.setAxisMinimum(0.8f);      // 初始刻度为0.8f
    xAxis.setAxisMaximum(10.2f);     // 最大刻度为10.2f
    xAxis.setGranularity(1f);		 // 设置轴的最小间隔

1.3 关于坐标显示

    xAxis.setDrawAxisLine(false);     // 设置不画X轴

1.4 设置X轴不可用

    xAxis.setEnabled(false);

1.5 网格线

    xAxis.setDrawGridLines(true);   					// 设置是否画网格线
    xAxis.setGridLineWidth(2);       					// 线宽
    xAxis.setGridColor(Color.RED);            			// 颜色
    xAxis.setGridDashedLine(DashPathEffect effect);     // 虚线

1.6

	xAxis.setCenterAxisLabels(true);					// 刻度居中

1.7 定制化X轴坐标
只需要重写以下方法即可:

    xAxis.setTextSize(15);                  
    xAxis.setTextColor(Color.RED);
    xAxis.setValueFormatter(new ValueFormatter() {
            @Override
            public String getFormattedValue(float value) {
                return "Day"+value;
            }
        });

有时候需要换行的X轴:
需要新建一个CustomXAxisRenderer的类，重写drawLabel方法，绘制X坐标：

    // 需要新建一个CustomXAxisRenderer的类
    public class CustomXAxisRenderer extends XAxisRenderer {
    
        public CustomXAxisRenderer(ViewPortHandler viewPortHandler, com.github.mikephil.charting.components.XAxis xAxis, Transformer trans) {
            super(viewPortHandler, xAxis, trans);
        }
    
        @Override
        protected void drawLabel(Canvas c, String formattedLabel, float x, float y, MPPointF anchor, float angleDegrees) {
            // 换行
            String[] lines = formattedLabel.split("\n");
            if(lines.length<=1){
                super.drawLabel(c, formattedLabel, x, y, anchor, angleDegrees);
            }
            for (int i = 0; i < lines.length; i++) {
                float vOffset = i * mAxisLabelPaint.getTextSize();
                // 绘制
                Utils.drawXAxisValue(c, lines[i], x, y + vOffset, mAxisLabelPaint, anchor, angleDegrees);
            }
        }
    }

    // 对chart重新设置X轴渲染器    
    mChart.setXAxisRenderer(
                new CustomXAxisRenderer(mChart.getViewPortHandler(), 
                        mChart.getXAxis(), 
                        mChart.getTransformer(YAxis.AxisDependency.LEFT)));       

2.Chart

2.1 MpChart的Chart是可以对图像进行手势缩放的，禁用：

    mChart.setScaleEnabled(false);

2.2 设置点击点后显示的自定义描述View

	// 自定义MarkerView
	public class MyMarkerView extends MarkerView {
		private final TextView tvContent;
		public MyMarkerView(Context context, int layoutResource) {
        	super(context, layoutResource);
        	tvContent = findViewById(R.id.tv_content);
    	}
    	@Override
    	public void refreshContent(Entry e, Highlight highlight) {
        	if (e instanceof CandleEntry) {
            	CandleEntry ce = (CandleEntry) e;
            	tvContent.setText(Utils.formatNumber(ce.getHigh(), 0, true));
        	} else {
            	tvContent.setText(Utils.formatNumber(e.getY(), 0, true));
        	}
        super.refreshContent(e, highlight);
    	}
    	@Override
    	public MPPointF getOffset() {
        	return new MPPointF(-(getWidth() / 2), -getHeight());
    	}
	}
	// custom_marker_view 自定义布局
    MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);
        mv.setChartView(mChart);
        mChart.setMarker(mv);

2.3 移动到指定位置

	mChart.moveViewToX(float xValue);
	mChart.moveViewTo(float xValue, float yValue, AxisDependency axis);
	mChart.moveViewToAnimated(float xValue, float yValue, AxisDependency axis, long duration);
	mChart.centerViewTo(float xValue, float yValue, AxisDependency axis);
	mChart.centerViewToY(float yValue, AxisDependency axis);
	mChart.centerViewToAnimated(float xValue, float yValue, AxisDependency axis, long duration);

2.4 设置显示范围

	mChart.setVisibleXRange(float minXRange, float maxXRange);
	mChart.setVisibleXRangeMaximum(float maxXRange);
	mChart.setVisibleYRange(float minYRange, float maxYRange, AxisDependency axis);
	mChart.setVisibleYRangeMaximum(float maxYRange, AxisDependency axis);
	mChart.setVisibleYRangeMinimum(float minYRange, AxisDependency axis);

3.数据

3.1 折线图封装数据键值对的类为LineData，柱形图则是BarData。

	// 先创建一些键值对
 	ArrayList<Entry> values1 = new ArrayList<>();
	for (int i = 1; i < size; i++) {
		// i为x，右边的随机数为Y值 ,可对x+0.5f使其显示在中央
		values1.add(new Entry(i, (int) (Math.random() * 55) +5));
	}
	// 折线
	// 一根折线
	LineDataSet d1 = new LineDataSet(values1, "折线描述");
	// 将折线放进折线List，可以添加多根折线
	ArrayList<ILineDataSet> sets = new ArrayList<>();
    sets.add(d1);
    // 折线图数据
    LineData data = new LineData(sets);
    mChart.setData(data);
	
	// 柱形图数据
	BarData data = new BarData();
	data.setBarWidth(float mBarWidth);

3.2 DataSet
  数据相关的设置：颜色、标记、样式等；
1.LineDataSet

	d.setLineWidth(2.5f);				// 线宽
    d.setHighLightColor(Color.rgb(217, 117, 117)); // 十字线颜色
	d.setDrawValues(false);			// 点上有值
	d.setCircleRadius(4.5f);			// 圆环半径
	d.setDrawCircleHole(false);		// 画圆环 否
    d.enableDashedLine(10f, 5f, 0f);   // 折线为虚线

2.BarDataSet

	d.setDrawValues(false);   									// 柱形图上的值
	d.setGradientColor(int startColor, int endColor);			// 柱形图渐变色

下载

1.mpchart下载：作者https://github.com/PhilJay/MPAndroidChart

总结

1.跟X轴Y轴有关的在Axis类里面；
2.跟图形绘制，X轴Y轴等绘制相关的在render里面；
3.跟数据相关的数据点颜色，绘制线宽等在DataSet；