MPChartAndroid的初体验,X轴和Y轴标签自定义

一 、项目要用个曲线图，于是就使用了 MPChartAndroid

1.使用方式很简单

1.添加依赖

dependencies { compile ‘com.github.PhilJay:MPAndroidChart:v3.0.2’
}

2.项目的build.gradle添加

allprojects {    repositories {        maven { url "https://jitpack.io" }    }}

3.界面的xml布局直接使用

<com.github.mikephil.charting.charts.LineChart                    android:id="@+id/chart1"                    android:layout_width="match_parent"                    android:layout_height="90dp"                    android:layout_alignParentBottom="true"                    android:layout_marginBottom="12dp"                    />

4.代码封装的非常完美，想要什么属性调用API进行设置就行了，github下载的事列代码没有中文注释，我就进行各种试。

   mLineChart.setLogEnabled(true);//打印日志    //取消描述文字    mLineChart.getDescription().setEnabled(false);    mLineChart.setNoDataText("没有数据");//没有数据时显示的文字    mLineChart.setNoDataTextColor(Color.WHITE);//没有数据时显示文字的颜色    mLineChart.setDrawGridBackground(false);//chart 绘图区后面的背景矩形将绘制    mLineChart.setDrawBorders(false);//是否禁止绘制图表边框的线    mLineChart.setBorderColor(Color.WHITE); //设置 chart 边框线的颜色。    mLineChart.setBorderWidth(3f); //设置 chart 边界线的宽度，单位 dp。    mLineChart.setTouchEnabled(true);     //能否点击    mLineChart.setDragEnabled(false);   //能否拖拽    mLineChart.setScaleEnabled(false);  //能否缩放    mLineChart.animateX(1000);//绘制动画 从左到右    mLineChart.setDoubleTapToZoomEnabled(false);//设置是否可以通过双击屏幕放大图表。默认是true    mLineChart.setHighlightPerDragEnabled(false);//能否拖拽高亮线(数据点与坐标的提示线)，默认是true    mLineChart.setDragDecelerationEnabled(false);//拖拽滚动时，手放开是否会持续滚动，默认是true（false是拖到哪是哪，true拖拽之后还会有缓冲）    MyMarkerView mv = new MyMarkerView(mActivity,    R.layout.custom_marker_view);    mv.setChartView(mLineChart); // For bounds control    mLineChart.setMarker(mv);        //设置 marker ,点击后显示的功能 ，布局可以自定义    XAxis xAxis = mLineChart.getXAxis();       //获取x轴线    xAxis.setDrawAxisLine(true);//是否绘制轴线    xAxis.setDrawGridLines(false);//设置x轴上每个点对应的线    xAxis.setDrawLabels(true);//绘制标签  指x轴上的对应数值    xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//设置x轴的显示位置    xAxis.setTextSize(12f);//设置文字大小    xAxis.setAxisMinimum(0f);//设置x轴的最小值 //`           xAxis.setAxisMaximum(31f);//设置最大值 //          xAxis.setLabelCount(10);  //设置X轴的显示个数    xAxis.setAvoidFirstLastClipping(false);//图表将避免第一个和最后一个标签条目被减掉在图表或屏幕的边缘    xAxis.setAxisLineColor(Color.WHITE);//设置x轴线颜色    xAxis.setAxisLineWidth(0.5f);//设置x轴线宽度    YAxis leftAxis = mLineChart.getAxisLeft();    YAxis axisRight = mLineChart.getAxisRight();    leftAxis.enableGridDashedLine(10f, 10f, 0f);  //设置Y轴网格线条的虚线，参1 实线长度，参2 虚线长度 ，参3 周期    leftAxis.setGranularity(20f); // 网格线条间距    axisRight.setEnabled(false);   //设置是否使用 Y轴右边的    leftAxis.setEnabled(true);     //设置是否使用 Y轴左边的    leftAxis.setGridColor(Color.parseColor("#7189a9"));  //网格线条的颜色    leftAxis.setDrawLabels(true);        //是否显示Y轴刻度    leftAxis.setStartAtZero(true);        //设置Y轴数值 从零开始    leftAxis.setDrawGridLines(true);      //是否使用 Y轴网格线条    leftAxis.setTextSize(12f);            //设置Y轴刻度字体    leftAxis.setTextColor(Color.WHITE);   //设置字体颜色    leftAxis.setAxisLineColor(Color.WHITE); //设置Y轴颜色    leftAxis.setAxisLineWidth(0.5f);    leftAxis.setDrawAxisLine(true);//是否绘制轴线     leftAxis.setMinWidth(0f);           leftAxis.setMaxWidth(200f);        leftAxis.setDrawGridLines(false);//设置x轴上每个点对应的线    Legend l = mLineChart.getLegend();//图例    l.setEnabled(false);   //是否使用 图例

5.LineChart 设置完成，接下来是数据的设置

private void setLineChartDate() {        mValues = new ArrayList<>();        mValues.add(new Entry(0, 10));        mValues.add(new Entry(1, 15));        mValues.add(new Entry(2, 25));        mValues.add(new Entry(3, 19));        mValues.add(new Entry(4, 25));        mValues.add(new Entry(5, 16));        mValues.add(new Entry(6, 40));        mValues.add(new Entry(7, 27));        if (mValues.size() == 0) return;        LineDataSet set1;        //判断图表中原来是否有数据        if (mLineChart.getData() != null &&                mLineChart.getData().getDataSetCount() > 0) {            //获取数据1            set1 = (LineDataSet) mLineChart.getData().getDataSetByIndex(0);            set1.setValues(mValues);            //刷新数据            mLineChart.getData().notifyDataChanged();            mLineChart.notifyDataSetChanged();        } else {            //设置数据1  参数1：数据源 参数2：图例名称            set1 = new LineDataSet(mValues, "测试数据1");            set1.setMode(LineDataSet.Mode.CUBIC_BEZIER);            set1.setColor(Color.WHITE);            set1.setCircleColor(Color.parseColor("#AAFFFFFF"));            set1.setHighLightColor(Color.WHITE);//设置点击交点后显示交高亮线的颜色            set1.setHighlightEnabled(true);//是否使用点击高亮线            set1.setDrawCircles(true);            set1.setValueTextColor(Color.WHITE);            set1.setLineWidth(1f);//设置线宽            set1.setCircleRadius(2f);//设置焦点圆心的大小            set1.setHighlightLineWidth(0.5f);//设置点击交点后显示高亮线宽            set1.enableDashedHighlightLine(10f, 5f, 0f);//点击后的高亮线的显示样式            set1.setValueTextSize(12f);//设置显示值的文字大小            set1.setDrawFilled(true);//设置使用 范围背景填充            set1.setDrawValues(false);            //格式化显示数据            final DecimalFormat mFormat = new DecimalFormat("###,###,##0");            set1.setValueFormatter(new IValueFormatter() {                @Override                public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {                    return mFormat.format(value);                }            });            if (Utils.getSDKInt() >= 18) {                // fill drawable only supported on api level 18 and above                Drawable drawable = ContextCompat.getDrawable(mActivity, R.color.translucence);                set1.setFillDrawable(drawable);//设置范围背景填充            } else {                set1.setFillColor(R.color.translucence);            }            ArrayList<ILineDataSet> dataSets = new ArrayList<>();            dataSets.add(set1); // add the datasets            //创建LineData对象 属于LineChart折线图的数据集合            LineData data = new LineData(dataSets);            // 添加到图表中            mLineChart.setData(data);            //绘制图表            mLineChart.invalidate();        }    }

效果展示

新的需求，X轴和Y轴需要自定义，经过研究可以这样设置

1.设置数据传入X轴要显示的标签

        mValues = new ArrayList<>();        mValues.add(new Entry(0, 10,"08-1"));        mValues.add(new Entry(1, 15,""));        mValues.add(new Entry(2, 25,""));        mValues.add(new Entry(3, 19,""));        mValues.add(new Entry(4, 25,"08-10"));        mValues.add(new Entry(5, 16,""));        mValues.add(new Entry(6, 40,""));        mValues.add(new Entry(7, 24,""));        mValues.add(new Entry(8, 27,"08-21"));

1.设置X轴和Y轴适配器

   xAxis.setValueFormatter((value, axis) -> mValues.get((int)      value).getData()+""); leftAxis.setValueFormatter(new IAxisValueFormatter() {            @Override            public String getFormattedValue(float value, AxisBase axis) {                return "￥"+ value;            }

1.点击提示的marker适配器

  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);    }

效果如下

希望能对你有所帮助~