MPAndroidChart--LineLChart

轉(zhuǎn)自http://www.itdecent.cn/p/185e50a70aa7

MPAndroidChart每一種圖表的基本使用方式都基本相同 了解一種圖表的實(shí)現(xiàn) 參考項(xiàng)目源碼其他的圖表也就差不多哩

  1. 在布局文件中定義
 <com.github.mikephil.charting.charts.LineChart
        android:id="@+id/lineChart"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:background="#ffffff"
        android:layout_margin="16dp"/>

2.綁定view 設(shè)置LineChart顯示屬性

LineChart lineChart= (LineChart) findViewById(R.id.lineChart);
//創(chuàng)建描述信息
Description description =new Description();
        description.setText("測(cè)試圖表");
        description.setTextColor(Color.RED);
        description.setTextSize(20);
        lineChart.setDescription(description);//設(shè)置圖表描述信息
        lineChart.setNoDataText("沒(méi)有數(shù)據(jù)熬");//沒(méi)有數(shù)據(jù)時(shí)顯示的文字
        lineChart.setNoDataTextColor(Color.BLUE);//沒(méi)有數(shù)據(jù)時(shí)顯示文字的顏色
        lineChart.setDrawGridBackground(false);//chart 繪圖區(qū)后面的背景矩形將繪制
        lineChart.setDrawBorders(false);//禁止繪制圖表邊框的線
        //lineChart.setBorderColor(); //設(shè)置 chart 邊框線的顏色。
        //lineChart.setBorderWidth(); //設(shè)置 chart 邊界線的寬度,單位 dp。
        //lineChart.setLogEnabled(true);//打印日志
        //lineChart.notifyDataSetChanged();//刷新數(shù)據(jù)
        //lineChart.invalidate();//重繪

3.綁定數(shù)據(jù)

       /**
         * Entry 坐標(biāo)點(diǎn)對(duì)象  構(gòu)造函數(shù) 第一個(gè)參數(shù)為x點(diǎn)坐標(biāo) 第二個(gè)為y點(diǎn)
         */
        ArrayList<Entry> values1 = new ArrayList<>();
        ArrayList<Entry> values2 = new ArrayList<>();

        values1.add(new Entry(4,10));
        values1.add(new Entry(6,15));
        values1.add(new Entry(9,20));
        values1.add(new Entry(12,5));
        values1.add(new Entry(15,30));

        values2.add(new Entry(3,110));
        values2.add(new Entry(6,115));
        values2.add(new Entry(9,130));
        values2.add(new Entry(12,85));
        values2.add(new Entry(15,90));

        //LineDataSet每一個(gè)對(duì)象就是一條連接線
        LineDataSet set1;
        LineDataSet set2;

        //判斷圖表中原來(lái)是否有數(shù)據(jù)
        if (lineChart.getData() != null &&
                lineChart.getData().getDataSetCount() > 0) {
            //獲取數(shù)據(jù)1
            set1 = (LineDataSet) lineChart.getData().getDataSetByIndex(0);
            set1.setValues(values1);
            set2= (LineDataSet) lineChart.getData().getDataSetByIndex(1);
            set2.setValues(values2);
            //刷新數(shù)據(jù)
            lineChart.getData().notifyDataChanged();
            lineChart.notifyDataSetChanged();
        } else {
            //設(shè)置數(shù)據(jù)1  參數(shù)1:數(shù)據(jù)源 參數(shù)2:圖例名稱
            set1 = new LineDataSet(values1, "測(cè)試數(shù)據(jù)1");
            set1.setColor(Color.BLACK);
            set1.setCircleColor(Color.BLACK);
            set1.setLineWidth(1f);//設(shè)置線寬
            set1.setCircleRadius(3f);//設(shè)置焦點(diǎn)圓心的大小
            set1.enableDashedHighlightLine(10f, 5f, 0f);//點(diǎn)擊后的高亮線的顯示樣式
            set1.setHighlightLineWidth(2f);//設(shè)置點(diǎn)擊交點(diǎn)后顯示高亮線寬
            set1.setHighlightEnabled(true);//是否禁用點(diǎn)擊高亮線
            set1.setHighLightColor(Color.RED);//設(shè)置點(diǎn)擊交點(diǎn)后顯示交高亮線的顏色
            set1.setValueTextSize(9f);//設(shè)置顯示值的文字大小
            set1.setDrawFilled(false);//設(shè)置禁用范圍背景填充

            //格式化顯示數(shù)據(jù)
            final DecimalFormat mFormat = new DecimalFormat("###,###,##0");
            set1.setValueFormatter(new IValueFormatter() {
                @Override
                public String getFormattedValue(float value, Entry entry, int dataSetIndex, ViewPortHandler viewPortHandler) {
                    return mFormat.format(value);
                }
            });
            if (Utils.getSDKInt() >= 18) {
                // fill drawable only supported on api level 18 and above
                Drawable drawable = ContextCompat.getDrawable(this, R.drawable.fade_red);
                set1.setFillDrawable(drawable);//設(shè)置范圍背景填充
            } else {
                set1.setFillColor(Color.BLACK);
            }

            //設(shè)置數(shù)據(jù)2
            set2=new LineDataSet(values2,"測(cè)試數(shù)據(jù)2");
            set2.setColor(Color.GRAY);
            set2.setCircleColor(Color.GRAY);
            set2.setLineWidth(1f);
            set2.setCircleRadius(3f);
            set2.setValueTextSize(10f);

            //保存LineDataSet集合
            ArrayList<ILineDataSet> dataSets = new ArrayList<>();
            dataSets.add(set1); // add the datasets
            dataSets.add(set2);
            //創(chuàng)建LineData對(duì)象 屬于LineChart折線圖的數(shù)據(jù)集合
            LineData data = new LineData(dataSets);
            // 添加到圖表中
            lineChart.setData(data);
            //繪制圖表
            lineChart.invalidate();
到這一步圖表就可以顯示出來(lái)了 默認(rèn)的效果表示不是很美麗 下面設(shè)置一下各種顯示效果

4.設(shè)置X軸的顯示效果

     //獲取此圖表的x軸
        XAxis xAxis = lineChart.getXAxis();
        xAxis.setEnabled(true);//設(shè)置軸啟用或禁用 如果禁用以下的設(shè)置全部不生效
        xAxis.setDrawAxisLine(true);//是否繪制軸線
        xAxis.setDrawGridLines(true);//設(shè)置x軸上每個(gè)點(diǎn)對(duì)應(yīng)的線
        xAxis.setDrawLabels(true);//繪制標(biāo)簽  指x軸上的對(duì)應(yīng)數(shù)值
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//設(shè)置x軸的顯示位置
        //xAxis.setTextSize(20f);//設(shè)置字體
        //xAxis.setTextColor(Color.BLACK);//設(shè)置字體顏色
        //設(shè)置豎線的顯示樣式為虛線
        //lineLength控制虛線段的長(zhǎng)度
        //spaceLength控制線之間的空間
        xAxis.enableGridDashedLine(10f, 10f, 0f);
//        xAxis.setAxisMinimum(0f);//設(shè)置x軸的最小值
//        xAxis.setAxisMaximum(10f);//設(shè)置最大值
        xAxis.setAvoidFirstLastClipping(true);//圖表將避免第一個(gè)和最后一個(gè)標(biāo)簽條目被減掉在圖表或屏幕的邊緣
        xAxis.setLabelRotationAngle(10f);//設(shè)置x軸標(biāo)簽的旋轉(zhuǎn)角度
//        設(shè)置x軸顯示標(biāo)簽數(shù)量  還有一個(gè)重載方法第二個(gè)參數(shù)為布爾值強(qiáng)制設(shè)置數(shù)量 如果啟用會(huì)導(dǎo)致繪制點(diǎn)出現(xiàn)偏差
//        xAxis.setLabelCount(10);
//        xAxis.setTextColor(Color.BLUE);//設(shè)置軸標(biāo)簽的顏色
//        xAxis.setTextSize(24f);//設(shè)置軸標(biāo)簽的大小
//        xAxis.setGridLineWidth(10f);//設(shè)置豎線大小
//        xAxis.setGridColor(Color.RED);//設(shè)置豎線顏色
//        xAxis.setAxisLineColor(Color.GREEN);//設(shè)置x軸線顏色
//        xAxis.setAxisLineWidth(5f);//設(shè)置x軸線寬度
//        xAxis.setValueFormatter();//格式化x軸標(biāo)簽顯示字符

5.設(shè)置Y軸的顯示效果 X軸與Y軸的常用屬性都差不多 不詳細(xì)舉例了

        /**
        * Y軸默認(rèn)顯示左右兩個(gè)軸線
        */
        //獲取右邊的軸線
         YAxis rightAxis=lineChart.getAxisRight();
        //設(shè)置圖表右邊的y軸禁用
        rightAxis.setEnabled(false);
        //獲取左邊的軸線
        YAxis leftAxis = lineChart.getAxisLeft();
        //設(shè)置網(wǎng)格線為虛線效果
        leftAxis.enableGridDashedLine(10f, 10f, 0f);
        //是否繪制0所在的網(wǎng)格線 
        leftAxis.setDrawZeroLine(false);

6.設(shè)置與圖表交互

        lineChart.setTouchEnabled(true); // 設(shè)置是否可以觸摸
        lineChart.setDragEnabled(true);// 是否可以拖拽
        lineChart.setScaleEnabled(false);// 是否可以縮放 x和y軸, 默認(rèn)是true
        lineChart.setScaleXEnabled(true); //是否可以縮放 僅x軸
        lineChart.setScaleYEnabled(true); //是否可以縮放 僅y軸
        lineChart.setPinchZoom(true);  //設(shè)置x軸和y軸能否同時(shí)縮放。默認(rèn)是否
        lineChart.setDoubleTapToZoomEnabled(true);//設(shè)置是否可以通過(guò)雙擊屏幕放大圖表。默認(rèn)是true
        lineChart.setHighlightPerDragEnabled(true);//能否拖拽高亮線(數(shù)據(jù)點(diǎn)與坐標(biāo)的提示線),默認(rèn)是true
        lineChart.setDragDecelerationEnabled(true);//拖拽滾動(dòng)時(shí),手放開(kāi)是否會(huì)持續(xù)滾動(dòng),默認(rèn)是true(false是拖到哪是哪,true拖拽之后還會(huì)有緩沖)
        lineChart.setDragDecelerationFrictionCoef(0.99f);//與上面那個(gè)屬性配合,持續(xù)滾動(dòng)時(shí)的速度快慢,[0,1) 0代表立即停止。

7.設(shè)置圖例

        Legend l = lineChart.getLegend();//圖例
        l.setPosition(Legend.LegendPosition.RIGHT_OF_CHART_INSIDE);//設(shè)置圖例的位置
        l.setTextSize(10f);//設(shè)置文字大小
        l.setForm(Legend.LegendForm.CIRCLE);//正方形,圓形或線
        l.setFormSize(10f); // 設(shè)置Form的大小
        l.setWordWrapEnabled(true);//是否支持自動(dòng)換行 目前只支持BelowChartLeft, BelowChartRight, BelowChartCenter
        l.setFormLineWidth(10f);//設(shè)置Form的寬度

8.設(shè)置MarkView提示 點(diǎn)擊交點(diǎn)的小提示窗

        //自定義的MarkerView對(duì)象
        MyMarkerView mv = new MyMarkerView(this, R.layout.custom_marker_view);
        mv.setChartView(lineChart);
        lineChart.setMarker(mv);

/**
*自定義MyMarkerView
*/
public class MyMarkerView extends MarkerView {

    private TextView tvContent;

    public MyMarkerView(Context context, int layoutResource) {
        super(context, layoutResource);

        tvContent= (TextView) findViewById(R.id.tvContent);
    }

    @Override
    public void refreshContent(Entry e, Highlight highlight) {

        if (e instanceof CandleEntry) {

            CandleEntry ce = (CandleEntry) e;

            tvContent.setText("" + Utils.formatNumber(ce.getHigh(), 0, true));
        } else {

            tvContent.setText("" + Utils.formatNumber(e.getY(), 0, true));
        }

        super.refreshContent(e, highlight);
    }

    @Override
    public MPPointF getOffset() {
        return new MPPointF(-(getWidth() / 2), -getHeight());
    }
}

//布局文件
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="60dp"
    android:layout_height="40dp"
    android:background="@drawable/marker2"
    android:layout_marginBottom="5dp">

    <TextView
        android:id="@+id/tvContent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="7dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:text=""
        android:textSize="12dp"
        android:textColor="@android:color/white"
        android:ellipsize="end"
        android:singleLine="true"
        android:textAppearance="?android:attr/textAppearanceSmall" />

</RelativeLayout>

9.設(shè)置動(dòng)畫(huà)

//        animateX(int durationMillis) : 水平軸動(dòng)畫(huà) 在指定時(shí)間內(nèi) 從左到右
//        animateY(int durationMillis) : 垂直軸動(dòng)畫(huà) 從下到上
//        animateXY(int xDuration, int yDuration) : 兩個(gè)軸動(dòng)畫(huà),從左到右,從下到上
        lineChart.animateXY(1000,1000);

在使用中遇到的問(wèn)題

1.x軸自定義標(biāo)簽的設(shè)置

在2點(diǎn)幾的版本中x軸的標(biāo)簽是直接可以通過(guò)LineData 的構(gòu)造參數(shù) 傳一個(gè)string數(shù)組設(shè)置進(jìn)去的 LineData data = new LineData(xVals, dataSets); 而最新的3版本看源碼似乎把這個(gè)重載去掉了 我自己想了想 通過(guò)XY軸都帶有的格式化數(shù)據(jù) 判斷value值來(lái)進(jìn)行標(biāo)簽顯示的控制 不知道到什么還有沒(méi)有其他的方法

setValueFormatter X軸,Y軸以及LineDataSet都帶有此方法

xAxis.setValueFormatter(new IAxisValueFormatter() {
            @Override
            public String getFormattedValue(float value, AxisBase axis) {
                return null;
            }
        });

2.x軸默認(rèn)的顯示數(shù)字顯示間隔

linechart
我想讓這里1,2,3,4,5,6,7這樣的順序顯示 沒(méi)有找到一個(gè)很好的辦法 求指教

3.x軸默認(rèn)顯示4個(gè)或是幾個(gè)標(biāo)簽。。。。 xAxis.setLabelCount(10); 可以設(shè)置標(biāo)簽的顯示數(shù)量

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容