android轻松画出好看的折线图?

首先附上hellocharts框架地址,我也是通过下载那个demo进行理解性测试学习的,可能会有没有考虑到的地方,还请指出。如果想更深一步了解这个框架,可以下载Demo自己去学习一下。

废话少说,上效果图:
直接显示标签数值
当碰到的时候显示标签数值

第一步:导入依赖包

implementation 'com.github.lecho:hellocharts-android:v1.5.8'

第二步:配置xml文件

这里还是比较简单,没有什么好说的

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".LineChartActivity" >

    <lecho.lib.hellocharts.view.LineChartView
        android:id="@+id/chart"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginBottom="100dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"></lecho.lib.hellocharts.view.LineChartView>

</androidx.constraintlayout.widget.ConstraintLayout>


第三步:activity代码(重点)

首先附上所有代码,下面进行参数的详解:

import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;

import java.util.ArrayList;
import java.util.List;

import lecho.lib.hellocharts.animation.ChartAnimationListener;
import lecho.lib.hellocharts.gesture.ZoomType;
import lecho.lib.hellocharts.listener.LineChartOnValueSelectListener;
import lecho.lib.hellocharts.model.Axis;
import lecho.lib.hellocharts.model.AxisValue;
import lecho.lib.hellocharts.model.Line;
import lecho.lib.hellocharts.model.LineChartData;
import lecho.lib.hellocharts.model.PointValue;
import lecho.lib.hellocharts.model.ValueShape;
import lecho.lib.hellocharts.model.Viewport;
import lecho.lib.hellocharts.util.ChartUtils;
import lecho.lib.hellocharts.view.Chart;
import lecho.lib.hellocharts.view.LineChartView;

public class LineChartActivity extends AppCompatActivity {
    private LineChartView chart;
    private final int maxNumberOfLines = 4;
    private final int numberOfPoints = 6;
    private final int number=60;

    float[][] randomNumbersTab = new float[maxNumberOfLines][numberOfPoints];

    private ValueShape shape = ValueShape.CIRCLE;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_line_chart);
        chart=findViewById(R.id.chart);
        generateValues();
        generateData();

        resetViewport();
    }


    //设置y轴的值从left到number
    private void resetViewport() {
        final Viewport v = new Viewport(chart.getMaximumViewport());
        v.bottom = 0;
        v.top = number;
        v.left = 0;
        v.right = numberOfPoints - 1;
        chart.setMaximumViewport(v);
        chart.setCurrentViewport(v);
    }

    private void generateValues() {
        for (int i = 0; i < maxNumberOfLines; ++i) {
            for (int j = 0; j < numberOfPoints; ++j) {
                randomNumbersTab[i][j] = (float) Math.random() * number;
            }
        }
    }

    private void generateData() {
        List<Line> lines = new ArrayList<Line>();
        List<AxisValue> axisXValues = new ArrayList<AxisValue>();
        for (int i = 0; i <= numberOfPoints; i++)
            axisXValues.add(i, new AxisValue(i).setLabel(i + "月"));
        int numberOfLines = 1;
        for (int i = 0; i < numberOfLines; ++i) {
            List<PointValue> values = new ArrayList<PointValue>();
            for (int j = 0; j < numberOfPoints; j++) {
                values.add(new PointValue(j, randomNumbersTab[i][j]));
            }

            Line line = new Line(values);
            line.setColor(ChartUtils.pickColor());    //设置颜色随机
            line.setShape(shape);         //设置形状
            line.setCubic(true);          //设置线为曲线,反之为折线
            line.setFilled(true);          //设置填满
            line.setHasLabels(true);    //显示便签
            line.setHasLabelsOnlyForSelected(true);
            line.setHasLines(true);
            line.setHasPoints(true);
            lines.add(line);
        }

        LineChartData data = new LineChartData(lines);

        data.setAxisXBottom(new Axis(axisXValues).setHasLines(true).setTextColor(Color.BLACK).setName("日期").setHasTiltedLabels(true).setMaxLabelChars(4));
        data.setAxisYLeft(new Axis().setHasLines(true).setName("收入").setTextColor(Color.BLACK).setMaxLabelChars(2));
        data.setBaseValue(Float.NEGATIVE_INFINITY);
        chart.setLineChartData(data);
    }
}

1.先对整体有一个了解

在这里插入图片描述

2.细说

1.resetViewport方法

设置y轴的值从0到number,number我设置为60。
在这里插入图片描述

2.generateValues方法

生成0到60的随机数,maxNumberOfLines设置折线数我设置为一条,numberOfPoints设置点的个数我设置为6
在这里插入图片描述

3.generateData方法(重点)内容最多

图解:
在这里插入图片描述
在这里插入图片描述
我考虑的可能不是很周到,可以多试一下,说不定可以了解到更多功能。

如果有时间的话,我将会说一下统计图,扇形图等图的实现等。

  • 9
    点赞
  • 55
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
以下是一个简单的示例代码,用于在Android上绘制折线图: 1. 创建一个新的XML布局文件,命名为“activity_main.xml”。在布局文件中添加一个“LineChart”视图: ``` <com.github.mikephil.charting.charts.LineChart android:id="@+id/lineChart" android:layout_width="match_parent" android:layout_height="match_parent" /> ``` 2. 在MainActivity.java中添加以下代码: ``` import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import com.github.mikephil.charting.charts.LineChart; import com.github.mikephil.charting.components.AxisBase; import com.github.mikephil.charting.components.Legend; import com.github.mikephil.charting.components.XAxis; import com.github.mikephil.charting.components.YAxis; import com.github.mikephil.charting.data.Entry; import com.github.mikephil.charting.data.LineData; import com.github.mikephil.charting.data.LineDataSet; import com.github.mikephil.charting.formatter.IAxisValueFormatter; import com.github.mikephil.charting.utils.ColorTemplate; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { private LineChart mLineChart; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mLineChart = (LineChart) findViewById(R.id.lineChart); // 设置图表的描述 mLineChart.getDescription().setEnabled(true); mLineChart.getDescription().setText("折线图示例"); // 设置图表的颜色 mLineChart.setBackgroundColor(Color.WHITE); // 设置图表的标识 Legend legend = mLineChart.getLegend(); legend.setEnabled(true); legend.setTextColor(Color.BLACK); // 设置X轴的属性 XAxis xAxis = mLineChart.getXAxis(); xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); xAxis.setGranularity(1f); xAxis.setTextColor(Color.BLACK); // 设置Y轴的属性 YAxis leftAxis = mLineChart.getAxisLeft(); leftAxis.setTextColor(Color.BLACK); leftAxis.setDrawGridLines(true); leftAxis.setGranularityEnabled(true); YAxis rightAxis = mLineChart.getAxisRight(); rightAxis.setEnabled(false); // 设置数据 List<Entry> entries = new ArrayList<Entry>(); entries.add(new Entry(0, 50)); entries.add(new Entry(1, 80)); entries.add(new Entry(2, 60)); entries.add(new Entry(3, 70)); entries.add(new Entry(4, 90)); LineDataSet dataSet = new LineDataSet(entries, "折线图"); dataSet.setColor(ColorTemplate.getHoloBlue()); dataSet.setCircleColor(ColorTemplate.getHoloBlue()); dataSet.setLineWidth(2f); dataSet.setCircleRadius(5f); dataSet.setDrawValues(true); LineData lineData = new LineData(dataSet); mLineChart.setData(lineData); // 设置X轴标签 final String[] labels = {"1月", "2月", "3月", "4月", "5月"}; xAxis.setValueFormatter(new IAxisValueFormatter() { @Override public String getFormattedValue(float value, AxisBase axis) { return labels[(int) value]; } }); // 刷新图表 mLineChart.invalidate(); } } ``` 运行应用程序,您将看到一个简单的折线图。 注意:您需要在项目的build.gradle文件中添加以下依赖项: ``` implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0-alpha' ```
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值