如何在android中创建水平可滚动分组条形图

Question

我需要创建这种水平滚动分组条形图

以下是我目前尝试过的一些链接

• How to create a BarChart with grouped bars with MPAndroidChart?
• MPAndroid Chart not displaying any labels for xAxis , what is missing?
• Scrollable BarChart with possibility to touch each bar using MpAndroidChart?
• MPAndroidChart BarChart horizontal / vertical
• How can I make my HorizontalBarChart scrollable?

这是我迄今为止尝试过的代码，但我不知道如何创建与上图完全相同的分组条形图并使其水平可滚动

class ChartFragment : BaseFragment() {

    var barEntries: ArrayList<BarEntry> = ArrayList()
    var barEntries1: ArrayList<BarEntry> = ArrayList()
    var barEntries2: ArrayList<BarEntry> = ArrayList()
    var barEntries3: ArrayList<BarEntry> = ArrayList()
    var barEntries4: ArrayList<BarEntry> = ArrayList()

    val xAxisLabel: ArrayList<String> = ArrayList()

    lateinit var rootView: View
    override fun onCreateView(
            inflater: LayoutInflater, container: ViewGroup?,
            savedInstanceState: Bundle?
    ): View? {
        rootView = inflater.inflate(R.layout.fragment_insigts, container, false)

        val description = Description()
        description.text = ""
        rootView.barChart.description = description

        getEntries()

        rootView.barChart.axisLeft.setDrawGridLines(false)
        rootView.barChart.xAxis.setDrawGridLines(false)
        rootView.barChart.axisLeft.setDrawAxisLine(false)


        rootView.barChart.axisRight.setDrawGridLines(false)
        rootView.barChart.axisLeft.setDrawGridLines(false)
        rootView.barChart.xAxis.setDrawGridLines(false)


//        rootView.barChart.xAxis.isEnabled = false
        rootView.barChart.axisLeft.isEnabled = false
        rootView.barChart.axisRight.isEnabled = false

        xAxisLabel.add("Mon")
        xAxisLabel.add("Tue")
        xAxisLabel.add("Wed")
        xAxisLabel.add("Thu")
        xAxisLabel.add("Fri")
        xAxisLabel.add("Sat")
        xAxisLabel.add("Sun")

        val xAxis = rootView.barChart.xAxis

        xAxis.valueFormatter = IndexAxisValueFormatter(xAxisLabel)


        rootView.barChart.setVisibleXRangeMaximum(20f)
        rootView.barChart.moveViewToX(10f)

        return rootView
    }



    private fun getEntries() {

        barEntries.add(BarEntry(1f, 70f))
        barEntries.add(BarEntry(2f, 80f))


        barEntries1.add(BarEntry(1f, 50f))
        barEntries1.add(BarEntry(2f, 40f))


        barEntries2.add(BarEntry(1f, 200f))
        barEntries2.add(BarEntry(2f, 30f))


        barEntries3.add(BarEntry(1f, 60f))
        barEntries3.add(BarEntry(2f, 30f))

        barEntries4.add(BarEntry(1f, 70f))
        barEntries4.add(BarEntry(2f, 80f))



        val barDataSet = BarDataSet(barEntries, "1")
        barDataSet.color = Color.parseColor("#F44336")

        val barDataSet1 = BarDataSet(barEntries1, "2")
        barDataSet1.setColors(Color.parseColor("#9C27B0"))

        val barDataSet2 = BarDataSet(barEntries2, "3")
        barDataSet1.setColors(Color.parseColor("#e241f4"))

        val barDataSet3 = BarDataSet(barEntries3, "4")
        barDataSet1.setColors(Color.parseColor("#42f46e"))

        val barDataSet4 = BarDataSet(barEntries4, "5")
        barDataSet1.setColors(Color.parseColor("#42f4ee"))

        val months = arrayOf("TYPE 1", "TYPE 2","TYPE 3","TYPE 4","TYPE 5")
        val data = BarData(barDataSet, barDataSet1, barDataSet2, barDataSet3,barDataSet4)
//        val data = BarData(barDataSet, barDataSet1)
        rootView.barChart.data = data

        val xAxis = rootView.barChart.xAxis
        xAxis.valueFormatter = IndexAxisValueFormatter(months)
        rootView.barChart?.axisLeft?.axisMinimum = 0F
        xAxis.position = XAxis.XAxisPosition.BOTTOM
        xAxis.granularity = 1f
        xAxis.setCenterAxisLabels(true)
        xAxis.isGranularityEnabled = true

        val groupSpace = 0.06f
        val barSpace = 0.02f // x2 dataset
        val barWidth = 0.45f

        //IMPORTANT *****
        data.barWidth = 0.15f
        rootView.barChart?.xAxis?.axisMinimum = 0F
//        rootView.barChart?.xAxis!!.axisMaximum = 0 + rootView.barChart.barData.getGroupWidth(groupSpace, barSpace) * groupCount
        rootView.barChart?.groupBars(0f, groupSpace, barSpace) // perform the "explicit" grouping

    }

}

谁能帮我创建这种水平滚动分组条形图

如果需要更多信息，请告诉我。提前致谢。您的努力将不胜感激。

Answer 1

终于解决了我的问题

示例代码

import android.graphics.Color
import android.os.Bundle
import android.text.SpannableString
import android.text.SpannableStringBuilder
import android.text.style.RelativeSizeSpan
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.github.mikephil.charting.charts.BarChart
import com.github.mikephil.charting.components.XAxis
import com.github.mikephil.charting.data.BarData
import com.github.mikephil.charting.data.BarDataSet
import com.github.mikephil.charting.data.BarEntry
import kotlinx.android.synthetic.main.fragment_chart.view.*
import com.github.mikephil.charting.interfaces.datasets.IBarDataSet
import com.github.mikephil.charting.components.YAxis
import com.github.mikephil.charting.formatter.IndexAxisValueFormatter


/**
 * A simple [Fragment] subclass.
 *
 */
class ChartFragment : BaseFragment() {

    lateinit var mChart: BarChart
    lateinit var rootView: View

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        rootView = inflater.inflate(R.layout.fragment_insigts, container, false)

        rootView.tvInflow.text = changeTextSizeOfAvailableBalance("198.12")
        rootView.tvOutFlow.text = changeTextSizeOfAvailableBalance("198.12")


        mChart = rootView.barChart
        getEntries()

        return rootView
    }

    private fun changeTextSizeOfAvailableBalance(price: String): SpannableStringBuilder {
        val spannableStringBuilder = SpannableStringBuilder("N")
        val spannable = SpannableString(price)
        spannable.setSpan(RelativeSizeSpan(2f), 0, spannable.length, 0)
        spannableStringBuilder.append(spannable)
        return spannableStringBuilder
    }

    private fun getEntries() {
        mChart.setDrawBarShadow(false)
        mChart.description.isEnabled = false
        mChart.setPinchZoom(false)
        mChart.setDrawGridBackground(false)

        val labels = arrayOf("", "JAN", "FEB", "MAR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC", "")

        val xAxis = mChart.xAxis
        xAxis.setCenterAxisLabels(true)
        xAxis.position = XAxis.XAxisPosition.BOTTOM
        xAxis.setDrawGridLines(false)
        xAxis.granularity = 1f // only intervals of 1 day
        xAxis.textColor = Color.BLACK
        xAxis.textSize = 11f
        xAxis.axisLineColor = Color.WHITE
        xAxis.axisMinimum = 1f
        xAxis.valueFormatter = IndexAxisValueFormatter(labels)
        xAxis.position = XAxis.XAxisPosition.TOP

        val leftAxis = mChart.axisLeft
        leftAxis.textColor = Color.BLACK
        leftAxis.textSize = 12f
        leftAxis.axisLineColor = Color.WHITE
        leftAxis.setDrawGridLines(false)
        leftAxis.granularity = 2f
        leftAxis.setLabelCount(8, true)
        leftAxis.setPosition(YAxis.YAxisLabelPosition.OUTSIDE_CHART)

        mChart.axisRight.isEnabled = false
        mChart.legend.isEnabled = false

        val valOne = floatArrayOf(10f, 20f, 44f, 40f, 50f, 50f, 52f, 30f, 40f, 50f, 40f, 30f)
        val valTwo = floatArrayOf(20f, 10f, 50f, 30f, 52f, 52f, 50f, 40f, 30f, 40f, 30f, 30f)

        val barOne = ArrayList<BarEntry>()
        val barTwo = ArrayList<BarEntry>()

        for (i in 0 until valOne.size) {
            barOne.add(BarEntry(i.toFloat(), valOne[i]))
            barTwo.add(BarEntry(i.toFloat(), valTwo[i]))
        }

        val set1 = BarDataSet(barOne, "barOne")
        set1.color = Color.GRAY
        val set2 = BarDataSet(barTwo, "barTwo")
        set2.color = Color.BLUE


        set1.isHighlightEnabled = false
        set2.isHighlightEnabled = false
        set1.setDrawValues(false)
        set2.setDrawValues(false)

        mChart.axisLeft.setDrawLabels(false)
        mChart.axisRight.setDrawLabels(false)

        val dataSets = ArrayList<IBarDataSet>()
        dataSets.add(set1)
        dataSets.add(set2)
        val data = BarData(dataSets)
        val groupSpace = 0.4f
        val barSpace = 0f
        val barWidth = 0.3f
        data.barWidth = barWidth
        xAxis.axisMaximum = labels.size - 1.1f
        mChart.data = data
        mChart.setScaleEnabled(false)
        mChart.setVisibleXRangeMaximum(4f)
        mChart.groupBars(1f, groupSpace, barSpace)
        mChart.invalidate()
    }


}

输出