MPAndroidChart圖表庫之折線圖

原創

2020-02-21 15:59

開始瞭解折線圖，是從項目需求開始的，剛開始在網上也瞭解了一些關於折線圖的實現，有的選擇自定義，無意間找到了android開源庫MPAndroidChart，這個開源庫可以實現折線圖、柱狀圖和比例圖等等，這裏主要還是講講折線圖的簡單實現；

首先我們在佈局中定義：

<com.github.mikephil.charting.charts.LineChart
    android:id="@+id/chart_line"
    android:layout_width="match_parent"
    android:layout_height="320dp"
    android:layout_gravity="center_horizontal"/>

然後對摺線圖的數據進行初始化，拿到縱橫座標的數據：

/**
 *
 * @param countX 橫向有多少個單位
 * @param countY 縱向有多少個單位
 * @return
 */
private LineData getLineData(int countX, int countY) {
    ArrayList<String> xValues = new ArrayList<String>();
    for (int i = 0; i < countX; i++) {
        // x軸顯示的數據，這裏默認使用數字下標顯示
        xValues.add("" + i);
    }
    // y軸的取隨機數據
    ArrayList<Entry> yValues = new ArrayList<Entry>();
    for (int i = 0; i < countX; i++) {
        float value = (float) (Math.random() * countY) + 3;
        yValues.add(new Entry(value, i));
    }
    // y軸的數據集合
    LineDataSet lineDataSet = new LineDataSet(yValues, "數據折線圖" /*顯示在比例圖上*/);
    // mLineDataSet.setFillAlpha(110);
    // mLineDataSet.setFillColor(Color.RED);
    //用y軸的集合來設置參數
    lineDataSet.setLineWidth(1.75f); // 線寬
    lineDataSet.setCircleSize(3f);// 顯示的圓形大小
    lineDataSet.setColor(Color.WHITE);// 顯示顏色
    lineDataSet.setCircleColor(Color.WHITE);// 圓形的顏色
    lineDataSet.setHighLightColor(Color.WHITE); // 高亮的線的顏色
    ArrayList<LineDataSet> lineDataSets = new ArrayList<LineDataSet>();
    lineDataSets.add(lineDataSet); // add the datasets
    LineData lineData = new LineData(xValues, lineDataSets);
    return lineData;
}

然後對摺線圖的樣式進行一個設置，像放大縮小，點的顏色、折線的顏色，背景色等等；

private void initChart() {
    LineChart chart_line = (LineChart) findViewById(R.id.chart_line);
    LineData lineData = getLineData(36,100);
    showChart(chart_line, lineData, Color.rgb(96, 195, 137));
}

// 設置顯示的樣式
private void showChart(LineChart lineChart, LineData lineData, int color) {
    lineChart.setDrawBorder(false); //是否在折線圖上添加邊框
    lineChart.setDescription("");// 數據描述
    // 如果沒有數據的時候，會顯示這個，類似listview的emtpyview
    lineChart.setNoDataTextDescription("You need to provide data for the chart.");
    lineChart.setDrawGridBackground(false); // 是否顯示錶格顏色
    lineChart.setGridColor(Color.WHITE & 0x70FFFFFF); // 表格的的顏色，在這裏是是給顏色設置一個透明度
    lineChart.setTouchEnabled(true); // 設置是否可以觸摸
    lineChart.setDragEnabled(true);// 是否可以拖拽
    lineChart.setScaleEnabled(true);// 是否可以縮放
    lineChart.setPinchZoom(false);//
    lineChart.setBackgroundColor(color);// 設置背景
    lineChart.setData(lineData); // 設置數據
    Legend mLegend = lineChart.getLegend(); // 設置比例圖標示，就是那個一組y的value的
    // mLegend.setPosition(LegendPosition.LEFT_OF_CHART);
    mLegend.setForm(Legend.LegendForm.CIRCLE);// 樣式
    mLegend.setFormSize(6f);// 字體
    mLegend.setTextColor(Color.WHITE);// 顏色
    //mLegend.setTypeface(mTf);// 字體
    lineChart.animateX(2500); // 立即執行的動畫,x軸
}