Android實現(xiàn)雙曲線折線圖

更新時間：2022年09月13日 16:24:53 作者：抱著回憶旅行

這篇文章主要為大家詳細介紹了Android實現(xiàn)雙曲線折線圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android實現(xiàn)雙曲線折線圖的具體代碼，供大家參考，具體內(nèi)容如下

先看一下效果圖

1.先下載jar包 mpandroidchartlibrary-2-1-6.jar

2.將jar包導入到libs文件夾中

3.在build.gradle中依賴

dependencies {
? ? .....
?
? ? compile files('libs/mpandroidchartlibrary-2-1-6.jar')
}

4.創(chuàng)建LineChartManager工具類

public class LineChartManager {
?
? ? private static String lineName = null;
? ? private static String lineName1 = null;
?
? ? /**
? ? ?* 創(chuàng)建一條折線
? ? ?* @param context 上下文
? ? ?* @param mLineChart 對象
? ? ?* @param count X軸的數(shù)據(jù)
? ? ?* @param datas Y軸的數(shù)據(jù)
? ? ?* @return LineData
? ? ?*/
? ? public static LineData initSingleLineChart(Context context, LineChart mLineChart, int count, float[] datas) {
?
? ? ? ? ArrayList<String> xValues = new ArrayList<String>();
? ? ? ? for (int i = 0; i < count; i++) {
? ? ? ? ? ? // x軸顯示的數(shù)據(jù)，這里默認使用數(shù)字下標顯示·
? ? ? ? ? ? xValues.add((i) + ":00");
? ? ? ? }
?
? ? ? ? // y軸的數(shù)據(jù)
? ? ? ? ArrayList<Entry> yValues = new ArrayList<Entry>();
? ? ? ? for (int i = 0; i < count; i++) {
? ? ? ? ? ? yValues.add(new Entry(datas[i], i));
? ? ? ? }
? ? ? ? //設(shè)置折線的樣式
? ? ? ? LineDataSet dataSet = new LineDataSet(yValues, lineName);
? ? ? ? // 設(shè)置數(shù)據(jù)線的樣式
? ? ? ? dataSet.setDrawCubic(true);// 改變折線樣式，用曲線。
? ? ? ? dataSet.setCubicIntensity(0.2f);// 設(shè)置曲線的平滑度
? ? ? ? //用y軸的集合來設(shè)置參數(shù)
? ? ? ? dataSet.setLineWidth(1.75f); // 線寬
? ? ? ? dataSet.setCircleSize(2f);// 顯示的圓形大小
? ? ? ? dataSet.setColor(Color.rgb(89, 194, 230));// 折線顯示顏色
? ? ? ? dataSet.setCircleColor(Color.rgb(89, 194, 230));// 圓形折點的顏色
? ? ? ? dataSet.setHighLightColor(Color.GREEN); // 高亮的線的顏色
? ? ? ? dataSet.setHighlightEnabled(true);
? ? ? ? dataSet.setValueTextColor(Color.rgb(89, 194, 230)); //數(shù)值顯示的顏色
? ? ? ? dataSet.setValueTextSize(8f); ? ? //數(shù)值顯示的大小
?
? ? ? ? ArrayList<LineDataSet> dataSets = new ArrayList<>();
? ? ? ? dataSets.add(dataSet);
?
? ? ? ? //構(gòu)建一個LineData ?將dataSets放入
? ? ? ? LineData lineData = new LineData(xValues, dataSets);
? ? ? ? return lineData;
? ? }
?
? ? /**
? ? ?* @param context ? ?上下文
? ? ?* @param mLineChart 折線圖控件
? ? ?* @param count ? ? ?折線在x軸的值
? ? ?* @param datas1 ? ? 折線在y軸的值
? ? ?* @param datas2 ? ? 另一條折線在y軸的值
? ? ?* @Description:創(chuàng)建兩條折線
? ? ?*/
? ? public static LineData initDoubleLineChart(Context context, LineChart mLineChart, int count, float[] datas1, float[] datas2) {
?
? ? ? ? ArrayList<String> xValues = new ArrayList<String>();
? ? ? ? for (int i = 0; i < count; i++) {
? ? ? ? ? ? // x軸顯示的數(shù)據(jù)，這里默認使用數(shù)字下標顯示
? ? ? ? ? ? xValues.add((i) + ":00");
? ? ? ? }
?
? ? ? ? // y軸的數(shù)據(jù)
? ? ? ? ArrayList<Entry> yValues1 = new ArrayList<Entry>();
? ? ? ? for (int i = 0; i < count; i++) {
? ? ? ? ? ? yValues1.add(new Entry(datas1[i], i));
? ? ? ? }
?
? ? ? ? // y軸的數(shù)據(jù)
? ? ? ? ArrayList<Entry> yValues2 = new ArrayList<Entry>();
? ? ? ? for (int i = 0; i < count; i++) {
? ? ? ? ? ? yValues2.add(new Entry(datas2[i], i));
? ? ? ? }
?
? ? ? ? LineDataSet dataSet = new LineDataSet(yValues1, lineName);
? ? ? ? //dataSet.enableDashedLine(10f, 10f, 0f);//將折線設(shè)置為曲線(即設(shè)置為虛線)
? ? ? ? //用y軸的集合來設(shè)置參數(shù)
? ? ? ? dataSet.setLineWidth(1.75f); // 線寬
? ? ? ? dataSet.setCircleSize(2f);// 顯示的圓形大小
? ? ? ? dataSet.setColor(Color.rgb(89, 194, 230));// 折線顯示顏色
? ? ? ? dataSet.setCircleColor(Color.rgb(89, 194, 230));// 圓形折點的顏色
? ? ? ? dataSet.setHighLightColor(Color.GREEN); // 高亮的線的顏色
? ? ? ? dataSet.setHighlightEnabled(true);
? ? ? ? dataSet.setValueTextColor(Color.rgb(89, 194, 230)); //數(shù)值顯示的顏色
? ? ? ? dataSet.setValueTextSize(8f); ? ? //數(shù)值顯示的大小
?
? ? ? ? LineDataSet dataSet1 = new LineDataSet(yValues2, lineName1);
?
? ? ? ? //用y軸的集合來設(shè)置參數(shù)
? ? ? ? dataSet1.setLineWidth(1.75f);
? ? ? ? dataSet1.setCircleSize(2f);
? ? ? ? dataSet1.setColor(Color.rgb(252, 76, 122));
? ? ? ? dataSet1.setCircleColor(Color.rgb(252, 76, 122));
? ? ? ? dataSet1.setHighLightColor(Color.GREEN);
? ? ? ? dataSet1.setHighlightEnabled(true);
? ? ? ? dataSet1.setValueTextColor(Color.rgb(252, 76, 122));
? ? ? ? dataSet1.setValueTextSize(8f);
?
? ? ? ? //構(gòu)建一個類型為LineDataSet的ArrayList 用來存放所有 y的LineDataSet ? 他是構(gòu)建最終加入LineChart數(shù)據(jù)集所需要的參數(shù)
? ? ? ? ArrayList<LineDataSet> dataSets = new ArrayList<>();
?
? ? ? ? //將數(shù)據(jù)加入dataSets
? ? ? ? dataSets.add(dataSet);
? ? ? ? dataSets.add(dataSet1);
?
? ? ? ? //構(gòu)建一個LineData ?將dataSets放入
? ? ? ? LineData lineData = new LineData(xValues, dataSets);
? ? ? ? return lineData;
? ? }
?
? ? /**
? ? ?* @Description:初始化圖表的樣式
? ? ?*/
? ? public static void initDataStyle(LineChart lineChart, LineData lineData, Context context) {
? ? ? ? //設(shè)置點擊折線點時，顯示其數(shù)值
// ? ? ? ?MyMakerView mv = new MyMakerView(context, R.layout.item_mark_layout);
// ? ? ? ?mLineChart.setMarkerView(mv);
? ? ? ? lineChart.setDrawBorders(false); //在折線圖上添加邊框
? ? ? ? //lineChart.setDescription("時間/數(shù)據(jù)"); //數(shù)據(jù)描述
? ? ? ? lineChart.setDrawGridBackground(false); //表格顏色
? ? ? ? lineChart.setGridBackgroundColor(Color.GRAY & 0x70FFFFFF); //表格的顏色，設(shè)置一個透明度
? ? ? ? lineChart.setTouchEnabled(true); //可點擊
? ? ? ? lineChart.setDragEnabled(true); ?//可拖拽
? ? ? ? lineChart.setScaleEnabled(true); ?//可縮放
? ? ? ? lineChart.setPinchZoom(false);
? ? ? ? lineChart.setBackgroundColor(Color.WHITE); //設(shè)置背景顏色
?
? ? ? ? lineChart.setData(lineData);
?
? ? ? ? // 隱藏表格的圖案示例
? ? ? ? Legend legend = lineChart.getLegend();
? ? ? ? legend.setEnabled(false);
?
// ? ? ? ?// 添加警戒線
// ? ? ? ?YAxis yAxis = lineChart.getAxisLeft();
// ? ? ? ?LimitLine ll = new LimitLine(40, "警戒線");
// ? ? ? ?ll.setLineWidth(0.5f);
// ? ? ? ?ll.setLineColor(Color.GRAY);
// ? ? ? ?ll.setTextColor(Color.GRAY);
// ? ? ? ?ll.setTextSize(12);
// ? ? ? ?ll.setEnabled(true);
// ? ? ? ?yAxis.addLimitLine(ll);
?
? ? ? ? Legend mLegend = lineChart.getLegend(); //設(shè)置標示，就是那個一組y的value的
? ? ? ? mLegend.setForm(Legend.LegendForm.SQUARE); //樣式
? ? ? ? mLegend.setFormSize(6f); //字體
? ? ? ? mLegend.setTextColor(Color.GRAY); //顏色
? ? ? ? lineChart.setVisibleXRange(0, 4); ? //x軸可顯示的坐標范圍
? ? ? ? XAxis xAxis = lineChart.getXAxis(); ?//x軸的標示
? ? ? ? xAxis.setPosition(XAxis.XAxisPosition.BOTTOM); //x軸位置
? ? ? ? xAxis.setTextColor(Color.GRAY); ? ?//字體的顏色
? ? ? ? xAxis.setTextSize(10f); //字體大小
? ? ? ? xAxis.setGridColor(Color.GRAY);//網(wǎng)格線顏色
? ? ? ? xAxis.setDrawGridLines(false); //不顯示網(wǎng)格線
? ? ? ? YAxis axisLeft = lineChart.getAxisLeft(); //y軸左邊標示
? ? ? ? YAxis axisRight = lineChart.getAxisRight(); //y軸右邊標示
? ? ? ? axisLeft.setTextColor(Color.GRAY); //字體顏色
? ? ? ? axisLeft.setTextSize(10f); //字體大小
? ? ? ? //axisLeft.setAxisMaxValue(800f); //最大值
? ? ? ? axisLeft.setLabelCount(10, true); //顯示格數(shù)
? ? ? ? axisLeft.setGridColor(Color.GRAY); //網(wǎng)格線顏色
?
? ? ? ? axisRight.setDrawAxisLine(false);
? ? ? ? axisRight.setDrawGridLines(false);
? ? ? ? axisRight.setDrawLabels(false);
?
? ? ? ? //設(shè)置動畫效果
? ? ? ? lineChart.animateY(2000, Easing.EasingOption.Linear);
? ? ? ? lineChart.animateX(2000, Easing.EasingOption.Linear);
? ? ? ? lineChart.invalidate();
? ? ? ? //lineChart.animateX(2500); ?//立即執(zhí)行動畫
? ? }
?
? ? /**
? ? ?* @param name
? ? ?* @Description:設(shè)置折線的名稱
? ? ?*/
? ? public static void setLineName(String name) {
? ? ? ? lineName = name;
? ? }
?
? ? /**
? ? ?* @param name
? ? ?* @Description:設(shè)置另一條折線的名稱
? ? ?*/
? ? public static void setLineName1(String name) {
? ? ? ? lineName1 = name;
? ? }
?
}

5.activity_main布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".MainActivity">
?
? ? <com.github.mikephil.charting.charts.LineChart
? ? ? ? android:layout_marginTop="10dp"
? ? ? ? android:id="@+id/line_chart"
? ? ? ? android:layout_width="match_parent"
? ? ? ? android:layout_height="240dp" />
?
</RelativeLayout>

6.MainActivity

public class MainActivity extends AppCompatActivity {
? ? //參考網(wǎng)址 https://github.com/msandroid/androidChartDemo
? ? private LineChart lineChart1,lineChart2;
? ? private LineData lineData;
?
? ? @Override
? ? protected void onCreate(Bundle savedInstanceState) {
? ? ? ? super.onCreate(savedInstanceState);
? ? ? ? setContentView(R.layout.activity_main);
? ? ? ? initChart2();
? ? }
? ? private void initChart2() {
? ? ? ? lineChart2 = (LineChart) findViewById(R.id.line_chart);
? ? ? ? //設(shè)置圖表的描述
? ? ? ? lineChart2.setDescription("");
?
? ? ? ? //設(shè)置y軸的數(shù)據(jù)
? ? ? ? float[] datas1 = {53, 23, 79, 42, 12, 26, 94, 85, 53, 12, 69, 42, 10, 26, 94, 85, 53, 13, 79, 42, 10, 20, 94, 85, 79, 42, 10, 20, 94, 85,95};//數(shù)據(jù)
? ? ? ? float[] datas2 = {76, 13, 69, 32, 82, 12, 59, 28, 16, 23, 39, 63, 89, 16, 34, 55, 16, 93, 29, 93, 69, 32, 82, 12, 59, 28, 16, 23, 39, 63,20};//數(shù)據(jù)
? ? ? ? //設(shè)置x軸的數(shù)據(jù)
? ? ? ? int numX=datas1.length;
? ? ? ? //設(shè)置折線的名稱
? ? ? ? LineChartManager2.setLineName("上月");
? ? ? ? //設(shè)置第二條折線y軸的數(shù)據(jù)
? ? ? ? LineChartManager2.setLineName1("本月");
? ? ? ? //創(chuàng)建兩條折線的圖表
? ? ? ? lineData = LineChartManager2.initDoubleLineChart(this, lineChart1, numX, datas1, datas2);
? ? ? ? LineChartManager2.initDataStyle(lineChart2, lineData, this);
? ? }
}

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: