Android MPAndroidChart 折线图 + 柱状图

作者: ryanxun | 来源:发表于2021-06-30 09:21 被阅读0次

初级_第三方iOS·Charts图表
MPAndroidChart 基础
图表系列之折线图
Android MPAndroidChart 折线图 + 柱状图
Android Chart框架 MPAndroidChart学习
Android Chart框架 MPAndroidChart学习
Android Chart框架 MPAndroidChart学习
跟我一步一步美化你的 MPAndroidChart
Android 折线图表MPAndroidChart的实现
ant design pro chart的使用

嘿,今天的你过的还好吗

折线图使用呐,网上搜多了,比来比去还是这个直观一点

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

依赖库都是需要的

//图表库
    api 'com.github.PhilJay:MPAndroidChart:v3.1.0'

其实github上写的听清楚的

我梳理了一下整体的基本都有的
X轴：XAxis
Y轴：YAxis
图例：Legend
描述：Description
限制线：LimitLine
显示的视图：MarkerView (就是选择中的时候显示的样子)

折线图:
首先是activity

<com.github.mikephil.charting.charts.LineChart
        android:id="@+id/lineChart"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:layout_centerInParent="true"/>

然后就是具体的配置在MainActivity中

  private void MpAndroidchart() {
        //是否显示边框
        mBinding.lineChart.setDrawBorders(false);
        //得到X轴
        XAxis xAxis = mBinding.lineChart.getXAxis();
        //设置X轴的位置 (不设置默认在上方)
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        //设置X轴坐标之间的最小间隔（因为此图有缩放功能，X轴,Y轴可设置可缩放）
        xAxis.setGranularity(1f);
        //设置X轴的刻度数量 第二个参数表示是否平均分配
        xAxis.setLabelCount(12, true);
        //设置X轴的值（最小值、最大值、然后会根据设置的刻度数量自动分配刻度显示）
        xAxis.setAxisMinimum(0f);
        xAxis.setAxisMaximum(23f);
        //X轴文字颜色
        xAxis.setTextColor(Color.WHITE);
        //X轴网格线颜色
        xAxis.setGridColor(Color.TRANSPARENT);
        //X轴颜色
        xAxis.setAxisLineColor(Color.WHITE);
        //设置X轴动画
//        mBinding.lineChart.animateX(3000);

        //得到Y轴
        YAxis leftYAxis = mBinding.lineChart.getAxisLeft();
        YAxis rightYAxis = mBinding.lineChart.getAxisRight();
        //设置从左侧Y轴值
        leftYAxis.setAxisMinimum(0f);
        leftYAxis.setAxisMaximum(100f);
        //设置从左侧Y轴值
        //        rightYAxis.setAxisMinimum(0f);
        //        rightYAxis.setAxisMaximum(100f);
        //右侧Y轴不显示
        rightYAxis.setEnabled(false);
        //设置Y轴坐标之间的最小间隔（因为此图有缩放功能，X轴,Y轴可设置可缩放）
        leftYAxis.setGranularity(1f);
        //设置Y轴的刻度数量 第二个参数表示是否平均分配
        leftYAxis.setLabelCount(10, false);
        //Y轴文字颜色
        leftYAxis.setTextColor(Color.WHITE);
        //Y轴网格线颜色
        leftYAxis.setGridColor(Color.TRANSPARENT);
        //Y轴颜色
        leftYAxis.setAxisLineColor(Color.WHITE);
        //设置X轴动画
//        mBinding.lineChart.animateY(3000);

        //        //得到限制线
        //        LimitLine limitLine = new LimitLine(95,"高限制性");
        //        //宽度
        //        limitLine.setLineWidth(4f);
        //        //字体大小
        //        limitLine.setTextSize(10f);
        //        //字体颜色
        //        limitLine.setTextColor(Color.RED);
        //        //线大小
        //        limitLine.setLineColor(Color.BLUE);
        //        //Y轴添加限制线
        //        leftYAxis.addLimitLine(limitLine);
        //        //X轴添加限制线
        //        xAxis.addLimitLine(limitLine);

        //得到Legend (下边的颜色线)
        Legend legend = mBinding.lineChart.getLegend();
        //设置Legend 文本颜色
        legend.setTextColor(Color.WHITE);
        //设置Legend 在顶部显示
        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
        //设置Legend 在右侧显示
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
        //设置Legend 在横向显示
        legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        //设置标签是否换行（当多条标签时 需要换行显示）
        //true：可换行。false：不换行
        legend.setWordWrapEnabled(false);
        //是否显示Lengend
        //true：显示。false：不显示
        legend.setEnabled(true);

        //得到描述
        Description description = new Description();
        //是否显示描述
        //true：显示。false：不显示
        description.setEnabled(true);
        //设置x轴描述
        description.setText("时间/小时");
        description.setTextColor(Color.WHITE);
        mBinding.lineChart.setDescription(description);

        //设置XY轴动画
        mBinding.lineChart.animateXY(3000, 3000);

        //设置数据
        List<Entry> entries = new ArrayList<>();
        for (int i = 0; i < 24; i++) {
            entries.add(new Entry(i, (float) (Math.random()) * 80));
        }
        //一个LineDataSet就是一条线
        LineDataSet lineDataSet = new LineDataSet(entries, "温度");
        //设置value的字体颜色
        lineDataSet.setValueTextColor(Color.WHITE);
        //设置曲线值的圆点是实心还是空心
        lineDataSet.setDrawCircleHole(false);
        //设置显示值的字体大小
        lineDataSet.setValueTextSize(9f);
        //线模式为圆滑曲线（默认折线）
        lineDataSet.setMode(LineDataSet.Mode.HORIZONTAL_BEZIER);
        //设置折线颜色
        lineDataSet.setColor(Color.WHITE);
        //设置点颜色
//        lineDataSet.setCircleColor(Color.WHITE);
        //设置填充颜色
//        lineDataSet.setDrawFilled(true);
//        lineDataSet.setFillDrawable(getResources().getDrawable(R.drawable.line_gradient_bg_shape));

        // 设置拖拽、缩放等
        mBinding.lineChart.setDragEnabled(false);
        mBinding.lineChart.setScaleEnabled(false);
        mBinding.lineChart.setScaleXEnabled(false);
        mBinding.lineChart.setScaleYEnabled(false);
        // 设置双指缩放
        mBinding.lineChart.setPinchZoom(true);

        LineData data = new LineData(lineDataSet);
        mBinding.lineChart.setData(data);
    }

最后样子是这样的

image.png

这个渐变色文件是蓝到白,简单写了一个

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="-90"
        android:endColor="#FEFFFF"
        android:startColor="#D9F3FF"></gradient>
</shape>

柱状图

 public void BarChartManager(BarChart barChart,WeatherHourlyBean WeatherHourlyBean){
        for (int i = 0; i < 11; i++) {
            XMinimum = Integer.parseInt(WeatherHourlyBean.getHourly().get(0).getFxTime().substring(11,13));
            XMaximum = Integer.parseInt(WeatherHourlyBean.getHourly().get(7).getFxTime().substring(11,13));
            xvalue = Integer.parseInt(WeatherHourlyBean.getHourly().get(i).getFxTime().substring(11,13));
            yvalue = Integer.parseInt(WeatherHourlyBean.getHourly().get(i).getTemp());
            barEntries.add(new BarEntry(xvalue, yvalue));
        }

        //是否显示边框
        barChart.setDrawBorders(false);
        //得到X轴
        XAxis xAxis = barChart.getXAxis();
        //设置X轴的位置 (不设置默认在上方)
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);
        //设置X轴坐标之间的最小间隔（因为此图有缩放功能，X轴,Y轴可设置可缩放）
        xAxis.setGranularity(1);
        //设置X轴的刻度数量 第二个参数表示是否平均分配
        xAxis.setLabelCount(7, true);
        //设置X轴的值（最小值、最大值、然后会根据设置的刻度数量自动分配刻度显示）
        xAxis.setAxisMinimum(XMinimum);
        xAxis.setAxisMaximum(XMaximum);
        //设置X轴文字显示
        //        xAxis.setValueFormatter(new ValueFormatter() {
        //            @Override
        //            public String getFormattedValue(float value) {
        //                return WeatherHourlyBean.getHourly().get(0).getFxTime() + "";
        //            }
        //        });
        //X轴文字颜色
        xAxis.setTextColor(Color.WHITE);
        //X轴网格线颜色
        xAxis.setGridColor(Color.TRANSPARENT);
        //X轴颜色
        xAxis.setAxisLineColor(Color.WHITE);
        //设置X轴动画
        //        mBinding.lineChart.animateX(3000);

        //得到Y轴
        YAxis leftYAxis = barChart.getAxisLeft();
        YAxis rightYAxis = barChart.getAxisRight();
        //设置从左侧Y轴值
        leftYAxis.setAxisMinimum(0);
        leftYAxis.setAxisMaximum(40);
        //设置从左侧Y轴值
        //        rightYAxis.setAxisMinimum(0f);
        //        rightYAxis.setAxisMaximum(100f);
        //右侧Y轴不显示
        rightYAxis.setEnabled(false);
        //设置Y轴坐标之间的最小间隔（因为此图有缩放功能，X轴,Y轴可设置可缩放）
        leftYAxis.setGranularity(1);
        //设置Y轴的刻度数量 第二个参数表示是否平均分配
        leftYAxis.setLabelCount(10, false);
        //Y轴文字颜色
        leftYAxis.setTextColor(Color.WHITE);
        //Y轴网格线颜色
        leftYAxis.setGridColor(Color.TRANSPARENT);
        //Y轴颜色
        leftYAxis.setAxisLineColor(Color.WHITE);
        //设置X轴动画
        //        mBinding.lineChart.animateY(3000);

        //        //得到限制线
        //        LimitLine limitLine = new LimitLine(95,"高限制性");
        //        //宽度
        //        limitLine.setLineWidth(4f);
        //        //字体大小
        //        limitLine.setTextSize(10f);
        //        //字体颜色
        //        limitLine.setTextColor(Color.RED);
        //        //线大小
        //        limitLine.setLineColor(Color.BLUE);
        //        //Y轴添加限制线
        //        leftYAxis.addLimitLine(limitLine);
        //        //X轴添加限制线
        //        xAxis.addLimitLine(limitLine);

        //得到Legend (下边的颜色线)
        Legend legend = barChart.getLegend();
        //设置Legend 文本颜色
        legend.setTextColor(Color.WHITE);
        //设置Legend 在顶部显示
        legend.setVerticalAlignment(Legend.LegendVerticalAlignment.TOP);
        //设置Legend 在右侧显示
        legend.setHorizontalAlignment(Legend.LegendHorizontalAlignment.RIGHT);
        //设置Legend 在横向显示
        legend.setOrientation(Legend.LegendOrientation.HORIZONTAL);
        //设置标签是否换行（当多条标签时 需要换行显示）
        //true：可换行。false：不换行
        legend.setWordWrapEnabled(false);
        //是否显示Lengend
        //true：显示。false：不显示
        legend.setEnabled(true);

        //得到描述
        Description description = new Description();
        //是否显示描述
        //true：显示。false：不显示
        description.setEnabled(true);
        //设置x轴描述
        description.setText("时间/小时");
        description.setTextColor(Color.WHITE);
        barChart.setDescription(description);

        //设置XY轴动画
        barChart.animateXY(3000, 3000);


        //一个LineDataSet就是一条线
        BarDataSet barDataSet = new BarDataSet(barEntries, "温度");
        //设置value的字体颜色
        barDataSet.setValueTextColor(Color.WHITE);
        //设置曲线值的圆点是实心还是空心
//        barDataSet.setDrawCircleHole(false);
        //设置显示值的字体大小
        barDataSet.setValueTextSize(10f);
        //设置折线颜色
        barDataSet.setColor(Color.BLUE);

        // 设置拖拽、缩放等
        barChart.setDragEnabled(false);
        barChart.setScaleEnabled(false);
        barChart.setScaleXEnabled(false);
        barChart.setScaleYEnabled(false);
        // 设置双指缩放
        barChart.setPinchZoom(false);

        BarData data = new BarData(barDataSet);
        barChart.setData(data);


    }

没更新或者频繁更新的时候都是在认真生活

初级_第三方iOS·Charts图表
可以绘制柱状图、折线图、K线图、饼状图等Charts，且和Android一致的图表界面MPAndroidChart...
MPAndroidChart 基础
MPAndroidChart 基础图表创建方式柱状图： xml: 折线图： xml: 饼图： xml: 图表的...
图表系列之折线图
MPAndroidChart是一个开源的第三方图表库，支持折线图、饼状图、柱状图等等，本文只介绍折线图的实现。 ...
Android MPAndroidChart 折线图 + 柱状图
嘿,今天的你过的还好吗折线图使用呐,网上搜多了,比来比去还是这个直观一点依赖库都是需要的其实github上写...
Android Chart框架 MPAndroidChart学习
Android Chart框架 MPAndroidChart学习笔记6_柱状图点击这里查看项目源码 1.xml布...
Android Chart框架 MPAndroidChart学习
Android Chart框架 MPAndroidChart学习笔记7_分组柱状图源码demo看这里这里是项目...
Android Chart框架 MPAndroidChart学习
Android Chart框架 MPAndroidChart学习笔记5_折线图点击这里查看项目源码 1.基本数据...
跟我一步一步美化你的 MPAndroidChart
MPAndroidChart 是 Android 平台上一个强大的 Chart 开源库，支持众多图形：折线图（L...
Android 折线图表MPAndroidChart的实现
昨日夜观天象，今日忽见北斗星陨落，《Android 折线图表》应运而生。一.本篇采用MPAndroidChart...
ant design pro chart的使用
BizCharts 一、柱状图柱状图效果：代码：二、折线图折线图效果image.png 代码