2019年11月9日 星期六

[ Android Studio ] MPAndroidChart套件之線圖圖表教學


圖表樣式預設畫面如下:(最下面有教學影片)

一、Description描述:創建圖表顯示的信息
Description description =new Description();
description.setText("圖表");
description.setTextColor(Color.RED);
description.setTextSize(36);
lineChart.setDescription(description);//設置圖表信息

二、Legend 圖例
Legend legend = lineChart.getLegend();
legend.setTextSize(16);

三、預設圖表樣式
1. 設定沒資料時顯示的內容
        lineChart.setNoDataText("沒有數據");//沒有數據時顯示的文字
        lineChart.setNoDataTextColor(Color.BLUE);//沒有數據時顯示文字的顏色
        lineChart.setBackgroundColor(Color.GRAY);//背景顏色
        lineChart.setNoDataTextTypeface(Typeface.createFromAsset(getAssets(),"OpenSans-Light.ttf"));//字型

2. 預設背景樣式
        lineChart.setDrawGridBackground(true);//圖表是否繪製網格背景顏色(灰白色)
        lineChart.setDrawBorders(true);//是否繪制圖表邊框的線
        lineChart.setBorderColor(Color.GREEN); //設置圖表邊框線的顏色。
        lineChart.setBorderWidth(5); //設置圖表邊界線的寬度,單位 dp。
        lineChart.setTouchEnabled(true); // 設定是否可以觸控
        lineChart.setDragEnabled(true);// 是否可以拖拽
        lineChart.setScaleEnabled(false);// 是否可以縮放 x和y軸, 預設是true
        lineChart.setScaleXEnabled(true); //是否可以縮放 僅x軸
        lineChart.setScaleYEnabled(false); //是否可以縮放 僅y軸

        lineChart.setPinchZoom(false);//設定x軸和y軸能否同時縮放。預設是否
        lineChart.setDoubleTapToZoomEnabled(true);//設定是否可以通過雙擊螢幕放大圖表。
        lineChart.setHighlightPerDragEnabled(true);//是否拖拽高亮線(資料點與座標的提示線)
        lineChart.setDragDecelerationEnabled(false);//拖拽滾動時,手放開是否會持續滾動,預設是true(false是拖到哪是哪,true拖拽之後還會有緩衝)
        lineChart.setDragDecelerationFrictionCoef(0.99f);//與上面那個屬性配合,持續滾動時的速度快慢,[0,1) 0代表立即停止
        lineChart.setLogEnabled(true);//設置啟用日誌
        lineChart.notifyDataSetChanged();//刷新數據
        lineChart.invalidate();//重繪
3. setOnChartValueSelectedListener :在圖表值上設置選定的偵聽器。
lineChart.setOnChartValueSelectedListener(new OnChartValueSelectedListener() {
            @Override
            public void onValueSelected(Entry e, Highlight h) {
                Toast.makeText(context,String.valueOf(e),Toast.LENGTH_LONG).show();
            }

            @Override
            public void onNothingSelected() {

            }
        });

四、資料顯示預設:設置數據1  參數1:數據源 參數2:圖例名稱
            set1 = new LineDataSet(values1, "數據資料");
            set1.setMode(LineDataSet.Mode.CUBIC_BEZIER);//設定曲線:立方曲線 CUBIC_BEZIER、水平曲線 HORIZONTAL_BEZIER 或折線 LINEAR

            set1.setColor(Color.BLACK);//線的顏色
            set1.setCircleColor(Color.BLACK);//圓圈(點)顏色
            set1.setLineWidth(2);//設置線寬
            set1.setCircleRadius(4);//設置焦點圓心的大小
            set1.enableDashedHighlightLine(5, 5, 0);//點擊後的虛線顯示樣式enableDashedHighlightLine(線寬度,分格寬度,階段)
            set1.setHighlightLineWidth(2);//設置點擊交點后顯示高亮線寬
            set1.setHighlightEnabled(true);//是否禁用點擊高亮線
            set1.setHighLightColor(Color.RED);//設置點擊交點后顯示交高亮線的顏色
            set1.setValueTextSize(20);//設置顯示值的文字大小
            set1.setDrawFilled(false);//設置禁用范圍背景填充

五、X軸預設樣式
        XAxis xAxis = lineChart.getXAxis();
        xAxis.setEnabled(true);//設置軸啟用或禁用 如果禁用以下的設置全部不生效
        xAxis.setDrawAxisLine(true);//是否繪制軸線
        xAxis.setDrawGridLines(true);//設置x軸上每個點對應的線
        xAxis.setDrawLabels(true);//繪制標簽  指x軸上的對應數值
        xAxis.setPosition(XAxis.XAxisPosition.BOTTOM);//設置x軸的顯示位置
        xAxis.setTextSize(16f);//設置字體標簽的大小
        xAxis.setTextColor(Color.BLACK);//設置字體顏色
        xAxis.enableGridDashedLine(10f, 10f, 0f); //設置豎線的顯示樣式為虛線 enableGridDashedLine(lineLength控制虛線段的長度,spaceLength控制線之間的空間,phase)
        xAxis.setAxisMinimum(0f);//設置x軸的最小值
        xAxis.setAxisMaximum(10f);//設置最大值
        xAxis.setAvoidFirstLastClipping(true);//圖表將避免第一個和最后一個標簽條目被減掉在圖表或屏幕的邊緣
        xAxis.setLabelRotationAngle(10f);//設置x軸標簽的旋轉角度
        xAxis.setLabelCount(10);
        xAxis.setTextColor(Color.BLUE);//設置軸標簽的顏色
        xAxis.setGridLineWidth(10f);//設置豎線大小
        xAxis.setGridColor(Color.RED);//設置豎線顏色
        xAxis.setAxisLineColor(Color.GREEN);//設置x軸線顏色
        xAxis.setAxisLineWidth(5f);//設置x軸線寬度
        xAxis.setValueFormatter();//格式化x軸標簽顯示字符

六、Y軸預設樣式
   YAxis rightAxis=lineChart.getAxisRight();//獲取右邊的軸線
    rightAxis.setEnabled(false);//關閉右邊 
    YAxis leftAxis = lineChart.getAxisLeft();//獲取左邊的軸線
    leftAxis.enableGridDashedLine(10f, 10f, 0f);//設置網格線為虛線效果
    leftAxis.setDrawZeroLine(false);//是否繪制0所在的網格線

影片教學:

 

沒有留言:

張貼留言

影片的問題請留在影片的留言區裡。
部落格不會另外通知給我,所以很難發現你有留言。