MPAndroidChart說明

原創 eastRiseWm 2019-10-26 14:56

MPAndroidChart

MPAndroidChart(待續)

	MPAndroidChart:Android上強大圖表工具

官方文檔說明

Barchart(柱狀圖)

常用方法說明:

        barChart.animateXY(800,1000) //動畫
        barChart.setExtraOffsets(0f,0f,0f,10f) //設置圖表的偏移量
        barChart.minOffset = 0f //爲BarChart左右設置填充 默認是15f
        barChart.setNoDataText("好像沒有數據")
        barChart.description.isEnabled = false //禁用描述
        barChart.setTouchEnabled(false) //不允許用戶觸摸
        //設置左邊Y軸
        val axisLeft = barChart.axisLeft
        axisLeft.isEnabled = true
        barChart.axisRight.isEnabled = false
        axisLeft.setDrawAxisLine(false)//不畫左邊Y軸的座標軸
        axisLeft.setDrawLabels(false)//不畫左邊Y周的lables
        axisLeft.setDrawGridLines(true) // 畫垂直於Y軸的線
        axisLeft.gridColor = Color.parseColor("#e3e3e3")//設置Y軸的網格線顏色
        axisLeft.spaceTop = 30f  //設置圖表中的最高值的頂部間距佔最高值的值的百分比（設置的百分比 = 最高柱頂部間距/最高柱的值）。默認值是10f，即10% 。

        //設置X軸
        val xAxis = barChart.xAxis
        xAxis.axisLineColor = Color.parseColor("#e3e3e3")//x軸顏色
        xAxis.textColor = Color.parseColor("#484848")//x軸lable的顏色
        xAxis.textSize = 8f//x軸lable的字體大小  單位dp。
        xAxis.valueFormatter = barChartValueFormatter//x軸的lable自定義f
        xAxis.setCenterAxisLabels(true)//x軸lable居中
        xAxis.setDrawGridLines(false) //不畫錘子x軸的網格線
        xAxis.position = XAxis.XAxisPosition.BOTTOM //設置X軸的位置及lable的在x軸的裏外
        xAxis.setAvoidFirstLastClipping(false)//避免“剪掉”在x軸上的圖表或屏幕邊緣的第一個和最後一個座標軸標籤項。
        xAxis.axisMaximum = 13f //設置該軸的最大值。 如果設置了，這個值將不會是根據提供的數據計算出來的。
        xAxis.axisMinimum = 1f  //設置該軸的自定義最小值。 如果設置了，這個值將不會是根據提供的數據計算出來的。
        xAxis.isGranularityEnabled = true
        xAxis.granularity = 1f  //x軸最小密度是1f
        xAxis.setCenterAxisLabels(true) //lable 居中
//        xAxis.labelRotationAngle = 90f //設置畫x座標lable時的方向
//        xAxis.xOffset = 3f
        xAxis.setLabelCount(13,false) // 設置y軸的標籤數量。 請注意，這個數字是不固定 if(force == false)，只能是近似的。 如果 if(force == true)，
                                            // 則確切繪製指定數量的標籤，但這樣可能導致軸線分佈不均勻。

        //設置legend 圖例
        val legend = barChart.legend
        legend.horizontalAlignment = Legend.LegendHorizontalAlignment.RIGHT //在最右邊
        legend.verticalAlignment = Legend.LegendVerticalAlignment.TOP //在最頂部
        legend.orientation = Legend.LegendOrientation.HORIZONTAL //圖例 水平擺放
        legend.textColor = Color.parseColor("#7e7e7e") //設置圖例標籤的顏色。
        legend.textSize = 9f //設置圖例標籤的大小 單位dp
        legend.formToTextSpace = 5f //設置 legend-form 和 legend-label 之間的空間。單位dp。
        legend.formSize = 3f //設置 legend-forms 的大小，單位dp。
        legend.setDrawInside(false) //圖例會知道chart的外面

BarData設置說明:

        //設置數據(如果分組的話會覆蓋掉x值)
        val groupSpace = 0.64f
        val barSpace = 0.03f // x4 DataSet
        val barWidth = 0.2f // x4 DataSet
        var barEntity = BarEntry(1f, 20.3f)   //bardata.groupBars分組的第一組
        var barEntity1 = BarEntry(2f, 40.3f)
        var barEntity2 = BarEntry(3f, 60.3f)
        var barEntity3 = BarEntry(4f, 10.3f)
        var barEntity31 = BarEntry(12f, 10.3f)

        var barEntity4 = BarEntry(5f, 10.3f) //bardata.groupBars分組的第一組
        var barEntity5 = BarEntry(4f, 80.3f)
        var barEntity6 = BarEntry(3f, 50.3f)
        var barEntity61 = BarEntry(12f, 50.3f)

        var barEntity7 = BarEntry(4f, 40.3f)  //bardata.groupBars分組的第一組
        var barEntity8 = BarEntry(3f, 10.3f)
        var barEntity9 = BarEntry(2f, 100.3f)
        var barEntity91 = BarEntry(12f, 100.3f)

//        var barEntity = BarEntry(changeX(1f,0), 20.3f)
//        var barEntity1 = BarEntry(changeX(2f,0), 40.3f)
//        var barEntity2 = BarEntry(changeX(3f,0), 60.3f)
//        var barEntity3 = BarEntry(changeX(4f,0), 10.3f)
//        var barEntity31 = BarEntry(changeX(5f,0), 10.3f)
//
//        var barEntity4 = BarEntry(changeX(5f,1), 10.3f)
//        var barEntity5 = BarEntry(changeX(4f,1), 80.3f)
//        var barEntity6 = BarEntry(changeX(3f,1), 50.3f)
//        var barEntity61 = BarEntry(changeX(12f,1), 50.3f)
//
//        var barEntity7 = BarEntry(changeX(4f,2), 40.3f)
//        var barEntity8 = BarEntry(changeX(3f,2), 10.3f)
//        var barEntity9 = BarEntry(changeX(2f,2), 100.3f)
//        var barEntity91 = BarEntry(changeX(12f,2), 100.3f)
        var bardata = BarData()
        var barDataSet1 = BarDataSet(listOf(barEntity, barEntity1, barEntity2, barEntity3,barEntity31), "空調")
        barDataSet1.color = Color.parseColor("#1d6359")
        var barDataSet2 = BarDataSet(listOf(barEntity4, barEntity5, barEntity6,barEntity61), "燈光")
        barDataSet2.color = Color.parseColor("#42b39a")
        var barDataSet3 = BarDataSet(listOf(barEntity7, barEntity8, barEntity9,barEntity91), "其它")
        barDataSet3.color = Color.parseColor("#73c382")
        bardata.addDataSet(barDataSet1)
        bardata.addDataSet(barDataSet2)
        bardata.addDataSet(barDataSet3)
        bardata.barWidth = 0.1f //設置bar的寬度
        bardata.groupBars(1f, groupSpace, barSpace) //設置開頭,每組的間距,每組內bar的間距(請仔細算算這個間距),組所處的x座標位置已經被重寫

PieChart(餅狀圖)

常用方法說明:

        //餅狀圖的方法說明
        pieChart.animateY(800, Easing.EaseInOutQuad) //設置餅狀圖動畫
        pieChart.setExtraOffsets(0f,0f,0f,0f) //設置圖表的偏移量
        pieChart.minOffset = 0f //爲BarChart左右設置填充 默認是15f
        pieChart.setNoDataText("好像沒有數據")
        pieChart.description.isEnabled = false //禁用描述
        pieChart.setTouchEnabled(true) //允許用戶觸摸
        pieChart.isRotationEnabled = true //允許滑動旋轉
        pieChart.setUsePercentValues(true) //在圖表內的值繪製在百分之，而不是與它們的原始值。 規定的值ValueFormatter進行格式化，然後以百分比規定。
        pieChart.setDrawEntryLabels(false) // 設置爲true，在扇區繪製lable值。
        pieChart.setEntryLabelTextSize(3f)
        pieChart.isHighlightPerTapEnabled = false // 不允許點擊手勢突出顯示值。
        pieChart.holeRadius = 52f/70f*100 //設置中心圓孔半徑佔整個餅狀圖半徑的百分比（100f 是最大=整個圖表的半徑），默認的50％的百分比（即50f）。
        pieChart.transparentCircleRadius = 2f  //把透明圓設置的比hole小就看不到啦
                                            // 則確切繪製指定數量的標籤，但這樣可導致軸線分佈不均勻。
        pieChart.centerText = generateCenterSpannableText() //通過SpannableString可設置中心文字的樣式

        //設置legend 圖例
        val legend = pieChart.legend
        legend.isEnabled = false //不讓圖例顯示
        legend.horizontalAlignment = Legend.LegendHorizontalAlignment.CENTER //在最右邊
        legend.verticalAlignment = Legend.LegendVerticalAlignment.BOTTOM //在最頂部
        legend.orientation = Legend.LegendOrientation.HORIZONTAL //圖例 水平擺放
        legend.textColor = Color.parseColor("#7e7e7e") //設置圖例標籤的顏色。
        legend.textSize = 9f //設置圖例標籤的大小 單位dp
        legend.formToTextSpace = 5f //設置 legend-form 和 legend-label 之間的空間。單位dp。
        legend.formSize = 3f //設置 legend-forms 的大小，單位dp。
        legend.setDrawInside(false) //圖例會知道chart的外面

PieChart中心文字多樣式例子

  /**
     *  通過SpannableString來設置CenterText的樣式
     */
    private fun generateCenterSpannableText(): SpannableString {

        val s = SpannableString("23125.9\n10月份總用電")
        s.setSpan(RelativeSizeSpan(1.5f), 0, 7, 0)  //餅狀圖中心文字的大小 是經過他們處理了的,不能直接設置爲效果圖中的大小
        s.setSpan(StyleSpan(Typeface.NORMAL), 0, 7, 0)
        s.setSpan(ForegroundColorSpan(Color.parseColor("#484848")), 0, 7,  0)
        s.setSpan(RelativeSizeSpan(0.5f), 7, s.length, 0)
        s.setSpan(StyleSpan(Typeface.NORMAL), 7, s.length,0)
        s.setSpan(ForegroundColorSpan(Color.parseColor("#7e7e7e")), 7, s.length,0)


//        val s = SpannableString("MPAndroidChart\ndeveloped by Philipp Jahoda")
//        s.setSpan(RelativeSizeSpan(1.7f), 0, 14, 0)
//        s.setSpan(StyleSpan(Typeface.NORMAL), 14, s.length - 15, 0)
//        s.setSpan(ForegroundColorSpan(Color.GRAY), 14, s.length - 15, 0)
//        s.setSpan(RelativeSizeSpan(.8f), 14, s.length - 15, 0)
//        s.setSpan(StyleSpan(Typeface.ITALIC), s.length - 14, s.length, 0)
//        s.setSpan(ForegroundColorSpan(ColorTemplate.getHoloBlue()), s.length - 14, s.length, 0)
        return s
    }s

PieData設置說明

        var barEntity = PieEntry(1f, "空調")
        var barEntity1 = PieEntry(1f, "燈光")
        var barEntity2 = PieEntry(1f, "其它")

        var barSet = PieDataSet(listOf(barEntity,barEntity1,barEntity2),"用電比重")
//        barSet.setDrawValues(false) //不繪製像 20f 20f 60f這些

        val colors = listOf<Int>(Color.parseColor("#1d6359"), Color.parseColor("#42b39a"), Color.parseColor("#73c382"))
        barSet.colors = colors
        barSet.sliceSpace = 0f //每個entity之間的間距
        var bardata = PieData(barSet)
        bardata.setValueFormatter(PercentFormatter(pieChart,false)) //設置成百分比
        bardata.setValueTextSize(3f) //設置比重的字體大小 33.3%
        bardata.setValueTextColor(Color.WHITE) //設置比重字體的顏色
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章