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 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);
}效果如下
希望能对你有所帮助~