AndroidMPChart中的LineChart使用的一些总结

最新推荐文章于 2024-05-20 18:42:01 发布

ypq374563453

最新推荐文章于 2024-05-20 18:42:01 发布

阅读量4.3k

点赞数

分类专栏： Android 文章标签： MPLineChart

本文链接：https://blog.csdn.net/ypq374563453/article/details/103904811

版权

Android 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

引入依赖

1.在项目的module中的build.gradle添加如下代码:

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

2. 在依赖中添加如下代码依赖:

dependencies {
    implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

使用

1.首先定义好布局，和其他控件使用没什么区别

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/lineChart1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    />

2.然后拿到布局，初始化LineChart,设定基本样式

public static void initChart(LineChart chart, Context context){
//此属性设置之后,点击图标中的某个点网格会自动将此点移动到屏幕中心 不设置则没反应
        mChart.setOnChartValueSelectedListener(this);
 
        // no description text
        // mChart.getDescription().setEnabled(false);
        //设置是否绘制chart边框的线
        mChart.setDrawBorders(false);
        //设置chart边框线颜色
        mChart.setBorderColor(Color.RED);
        //设置chart边框线宽度
        mChart.setBorderWidth(1f);
        //设置chart是否可以触摸
        mChart.setTouchEnabled(true);
        mChart.setDragDecelerationFrictionCoef(0.9f);
 
        //设置是否可以拖拽
        mChart.setDragEnabled(true);
        //设置是否可以缩放 x和y，默认true
        mChart.setScaleEnabled(true);
        //设置是否可以通过双击屏幕放大图表。默认是true
        mChart.setDoubleTapToZoomEnabled(false);
        //是否启用网格背景
        mChart.setDrawGridBackground(false);
        mChart.setHighlightPerDragEnabled(true);
        //设置chart动画 x轴y轴都有动画
        //mChart.animateXY(2000, 2000);
        // false代表缩放时X与Y轴分开缩放,true代表同时缩放
        mChart.setPinchZoom(true);
        // set an alternative background color
        //图表背景颜色的设置
        mChart.setBackgroundColor(Color.LTGRAY);
        //图表进入的动画时间
        mChart.animateX(2500);
 
        //描述信息
        Description description = new Description();
        description.setText("描述信息相关内容");
        //设置描述信息
        mChart.setDescription(description);
        //设置没有数据时显示的文本
        mChart.setNoDataText("没有数据撒...")
}

3.设置表头

Legend l = mChart.getLegend();
        // modify the legend ...
        //表头代表线条说明前的图形 可以设置线形,圆形,方形
        l.setForm(LegendForm.SQUARE);
        l.setTypeface(mTfLight);
        //表头字体大小
        l.setTextSize(11f);
        //表头线条说明的颜色
        l.setTextColor(Color.RED);
        //表头线条放置的位置
        l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.CENTER);
        //表头多条线条的排列方式
        l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        //表头的说明是否绘制到图表内部
        l.setDrawInside(false);

4. X轴数据设置

xAxis = mChart.getXAxis();
        xAxis.setTypeface(mTfLight);
        xAxis.setTextSize(8f);
        //X轴显示的位置
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM_INSIDE);
        //X轴
        xAxis.setSpaceMin(0.5f);
        //X轴数据的颜色
        xAxis.setTextColor(Color.BLUE);
        //是否绘制X轴的网格线
        xAxis.setDrawGridLines(false);
        xAxis.setDrawAxisLine(false);
        //TODO 设置x轴坐标显示的数量  加true才能显示设置的数量 一旦加true后续的x轴数据显示有问题,
        // xAxis.setLabelCount(5,true);
        xAxis.setLabelCount(5);
        //设置竖线为虚线样子
        xAxis.enableGridDashedLine(10f, 10f, 0f);
 
        //图表第一个和最后一个label数据不超出左边和右边的Y轴
        // xAxis.setAvoidFirstLastClipping(true);
 
        /********************************************************************************/
        final Map<Integer, String> xMap = new HashMap<>();
        final String[] valueArry = {"2017-05-11", "2017-05-12", "2017-05-13", "2017-05-14", "2017-05-15","2017-05-16", "2017-05-17", "2017-35-18", "2017-05-19", "2017-05-20","2017-05-21", "2017-05-22", "2017-05-23", "2017-05-24", "2017-05-25","2017-05-26", "2017-05-27", "2017-05-28", "2017-05-29", "2017-05-30"};
        for (int i = 0; i < yVals1.size(); i++) {
           xMap.put((int) yVals1.get(i).getX(), valueArry[i]);
        }
        //自定义x轴标签数据
        xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return xMap.get((int)value);
            }
        });
        /********************************************************************************/

5. 设置限制线

//设置限制线 70代表某个该轴某个值，也就是要画到该轴某个值上
        LimitLine limitLine = new LimitLine(70);
        //设置限制线的宽
        limitLine.setLineWidth(1f);
        //设置限制线的颜色
        limitLine.setLineColor(Color.RED);
        //设置基线的位置
        limitLine.setLabelPosition(LimitLine.LimitLabelPosition.LEFT_TOP);
        limitLine.setLabel("我是基线，也可以叫我水位线");
        //设置限制线为虚线
        limitLine.enableDashedLine(10f, 10f, 0f);

6. Y轴属性设置

//左侧Y轴属性设置
        YAxis leftAxis = mChart.getAxisLeft();
        leftAxis.setTypeface(mTfLight);
        //Y轴数据的字体颜色
        leftAxis.setTextColor(ColorTemplate.getHoloBlue());
        //左侧Y轴最大值
        leftAxis.setAxisMaximum(200f);
        //左侧Y轴最小值
        leftAxis.setAxisMinimum(0f);
        //是否绘制Y轴网格线
        leftAxis.setDrawGridLines(false);
        //TODO 什么属性?
        leftAxis.setGranularityEnabled(true);
        //左边Y轴添加限制线
        leftAxis.addLimitLine(limitLine);
        //右侧Y轴坐标
        YAxis rightAxis = mChart.getAxisRight();
        rightAxis.setTypeface(mTfLight);
        rightAxis.setTextColor(Color.WHITE);
        rightAxis.setAxisMaximum(900);
        rightAxis.setAxisMinimum(0);
        rightAxis.setDrawGridLines(false);
        //是否绘制等0线
        rightAxis.setDrawZeroLine(true);
        rightAxis.setGranularityEnabled(false);

3.动态获取数据给布局填充数据

  LineDataSet dataSet = new LineDataSet(entries, label);
        // 设置曲线的颜色
        dataSet.setColor(lineColor);
        //数值文字颜色
        dataSet.setValueTextColor(textColor);
        // 模式为贝塞尔曲线
        dataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
        // 是否绘制数据值
        dataSet.setDrawValues(false);
        // 是否绘制圆点
        dataSet.setDrawCircles(false);
        dataSet.setDrawCircleHole(false);
        // 这里有一个坑，当我们想隐藏掉高亮线的时候，MarkerView 跟着不见了
        // 因此只有将它设置成透明色
//        dataSet.setHighlightEnabled(true);// 隐藏点击时候的高亮线
        //设置高亮线为透明色
//        dataSet.setHighLightColor(Color.TRANSPARENT);

        //设置圆点的颜色
        dataSet.setCircleColor(lineColor);
        // 设置圆点半径
        dataSet.setCircleRadius(1f);
        // 设置线的宽度
        dataSet.setLineWidth(3f);
        //设置线的容器
        ArrayList<ILineDataSet> sets = new ArrayList<>();
        sets.clear();
        //多个dataset就是多条线
        sets.add(dataSet);


        XAxis xAxis = chart.getXAxis();
        //设置x轴偏移量，有时显示年月日时X轴数据显示不全时，需要给与一定的偏移量，来让数据显示全
        chart.setExtraRightOffset(30f);
        chart.setExtraLeftOffset(10f);
        //这里list是string的日期集合，用来在X轴显示日期
        xAxis.setValueFormatter(new IndexAxisValueFormatter(list));
        YAxis yAxis = chart.getAxisLeft();
        //这里是为了让Y轴显示负值，默认Y轴从0开始
        yAxis.resetAxisMinimum();
      
        LineData d = new LineData(sets);
        chart.setData(d);
        chart.invalidate();

4.显示时遇到的问题和一些小技巧

表头有时显示多个标签，需要有换行，以及表头图形和文字间隔的设置

Legend l = mChart.getLegend();
//表头代表线条说明前的图形 可以设置线形,圆形,方形
        l.setForm(Legend.LegendForm.SQUARE);
        //设置图形与文本的间隔（单位：dp），默认5dp
        l.setFormToTextSpace(3f);
        //表头线条放置的位置
        l.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
        l.setHorizontalAlignment(Legend.LegendHorizontalAlignment.LEFT);
        //表头多条线条的排列方式
        l.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        //表头的说明是否绘制到图表内部
        l.setDrawInside(false);
        //自动换行
        l.setWordWrapEnabled(true);
        //表头间距
        l.setXEntrySpace(5f);
        //表头行间距
        l.setYEntrySpace(5f);

Y轴有时需要自定义样式，例如0.23%等样式

 yAxis.setValueFormatter(new ValueFormatter() {
    @Override
    public String getFormattedValue(float value) {
         return String.format("%.2f", value * 100) + "%";
    }
 });

样式还原使用

yAxis.setValueFormatter(null);

动态显示多条数据时，设置数据不显示使用

lineChart.notifyDataSetChanged();

最后放一下效果图

ypq374563453

关注

0
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
AndroidMPChart中的LineChart使用的一些总结

引入依赖 1.在项目的module中的build.gradle添加如下代码:allprojects { repositories { maven { url "https://jitpack.io" } }}2. 在依赖中添加如下代码依赖:dependencies { implementation 'com....
复制链接

扫一扫