如何根据 y 轴值是正值还是负值来更改 MPAndroidChart 折线图的线条和填充颜色 [英] How to change line and fill color of MPAndroidChart line chart based on if y axis value is positive or negative

问题描述

想知道是否可以根据 y 轴值是正值还是负值来更改折线图的线条和填充颜色.一个例子如下

Was wondering if it is possible to change the line and fill color for the line chart based on if the y-axis values are positive or negative. An example of it is below

下面是我可以用下面的代码实现的

Below is what i could achieve with the following code

    private fun setUpLineChart() {
        val lineData = getDataSet()
        view.lineChart.apply {
            data = lineData
            description.isEnabled = false
            setScaleEnabled(false)
            setTouchEnabled(false)
            legend.isEnabled = false
            axisLeft.apply {
                setDrawLabels(false)
                setDrawGridLines(false)
                setDrawAxisLine(false)
                spaceBottom = 30f
            }
            axisRight.apply {
                setDrawLabels(false)
                setDrawGridLines(false)
                setDrawAxisLine(false)
            }
            xAxis.apply {
                setDrawLabels(false)
                setDrawGridLines(false)
                setDrawAxisLine(false)
            }
            animateXY(700, 1000, Easing.EaseInOutQuad)
        }
    }

    private fun getDataSet(): LineData {
        val entries = mutableListOf<Entry>()
        val dataList = listOf(1, 20, -20, 33, 54, 7, -18, 2)

        dataList.forEachIndexed { index, element ->
            entries.add(Entry(index.toFloat(), element.toFloat()))
        }

        val dataSet = LineDataSet(entries, "")
        dataSet.apply {
            setDrawCircles(false)
            valueTextSize = 0f
            lineWidth = 3f
            mode = LineDataSet.Mode.HORIZONTAL_BEZIER
            color = ContextCompat.getColor(view.context, R.color.colorOnSurface)
            setDrawFilled(true)
            fillColor = ContextCompat.getColor(view.context, R.color.colorSurface2)
        }
        return LineData(dataSet)
    }

推荐答案

线条和填充颜色绑定到特定的 LineDataSet.因此，要根据上面的示例实现您想要的结果，您必须将当前的数据集分成 4 个 LineDataSet(2 个正和 2 个负)，通过这样做，每个都可以拥有自己的填充和线条颜色，并且您可以灵活地拥有每个数据集需要多少种颜色.当然，您必须按照自己的逻辑将正 LineDataSet 与负 LineDataSet 分开.我已经修改了您的 getDataSet() 函数，以举例说明如何实现正 LineDataSet 与负 LineDataSet 的分离，每个都有自己的线条和填充颜色.

The line and fill colors are bind to a specific LineDataSet. So to achieve the result you want according to the above example you have to separate your current dataSet into 4 LineDataSets (2 positive and 2 negative) and by doing this each one then can have its own fill and line colors and you are flexible to have as many colors you want for each dataSet. Of course you have to do your own logic to separate the positive LineDataSets from negative LineDataSets. I have modified your getDataSet() function to give you an example of how to achieve the separation of positive LineDataSets from negative LineDataSets each one having its own line and fill colors.

private fun getDataSet(): LineData? {
        val dataSets: MutableList<ILineDataSet> = ArrayList()
        val yArray = floatArrayOf(1f, 20f, -20f, 33f, 54f, 7f, -18f, 2f)
        var entries = ArrayList<Entry?>()
        var prevValueIsPositive = false
        var prevValueIsNegative = false
        val step = 1f
        for (i in yArray.indices) {
            val y = yArray[i]
            //positive y values
            if (y >= 0) {
                //we are changing to positive values so draw the current negative dataSets
                if (prevValueIsNegative) {
                    //calculate the common mid point between a positive and negative y
                    val midEntry = Entry(i.toFloat() - step / 2, 0f)
                    entries.add(midEntry)

                    //draw the current negative dataSet to Red color
                    dataSets.add(getLineDataSet(entries, android.R.color.holo_red_dark, android.R.color.holo_purple))

                    //and initialize a new DataSet starting from the above mid point Entry
                    entries = ArrayList()
                    entries.add(midEntry)
                    prevValueIsNegative = false
                }

                //we are already in a positive dataSet continue adding positive y values
                entries.add(Entry(i.toFloat(), y))
                prevValueIsPositive = true
                //not having any other positive-negative changes so add the remaining positive values in the final dataSet
                if (i == yArray.size - 1) {
                    dataSets.add(getLineDataSet(entries, android.R.color.holo_green_light, android.R.color.holo_orange_dark))
                }
            } else {
                //we are changing to negative values so draw the current positive dataSets
                if (prevValueIsPositive) {
                    //calculate the common mid point between a positive and negative y
                    val midEntry = Entry(i.toFloat() - step / 2, 0f)
                    entries.add(midEntry)

                    //draw the current positive dataSet to Green color
                    dataSets.add(getLineDataSet(entries, android.R.color.holo_green_light, android.R.color.holo_orange_dark))

                    //and initialize a new DataSet starting from the above mid point Entry
                    entries = ArrayList()
                    entries.add(midEntry)
                    prevValueIsPositive = false
                }

                //we are already in a negative dataSet continue adding negative y values
                entries.add(Entry(i.toFloat(), y))
                prevValueIsNegative = true
                //not having any other positive-negative changes so add the remaining negative values in the final dataSet
                if (i == yArray.size - 1) {
                    dataSets.add(getLineDataSet(entries, android.R.color.holo_red_dark, android.R.color.holo_purple))
                }
            }
        }
        return LineData(dataSets)
    }

使用下面的辅助函数准备一个具有指定线条和填充颜色的新 LineDataSet:

with the usage of the below helper function to prepare a new LineDataSet with its specified line and fill colors:

private fun getLineDataSet(entries: ArrayList<Entry?>, fillColor: Int, lineColor: Int): LineDataSet {
        val dataSet = LineDataSet(entries, "")
        dataSet.setDrawCircles(false)
        dataSet.valueTextSize = 0f
        dataSet.lineWidth = 3f
        dataSet.mode = LineDataSet.Mode.HORIZONTAL_BEZIER
        dataSet.color = ContextCompat.getColor(this, lineColor)
        dataSet.setDrawFilled(true)
        dataSet.fillColor = ContextCompat.getColor(this, fillColor)
        return dataSet
    }

这篇关于如何根据 y 轴值是正值还是负值来更改 MPAndroidChart 折线图的线条和填充颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！