如何像这张图片一样动态创建折线图

Question

Line Graph

我有 5 个动态数据，结果为 +1 或 -1，如果结果为 +1，则图形方向朝上，如果结果为 -1，则图形方向朝下。

Answer 1

您问题中的图片无法查看，但我可以提供一个示例，说明如何在您的 android 应用中轻松绘制折线图。

首先-如评论中所述-您可以使用MPAndroidChart。您可以将其添加到您的项目中，如下所示：

 implementation "com.github.PhilJay:MPAndroidChart:v3.0.3"

这是我在个人项目中使用的示例默认折线图实现。

open class DefaultLineChart @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyle: Int = 0)
    : LineChart(context, attrs, defStyle) {

    init {
        setupChart()
    }

    private fun setupChart() {

        // Init Description
        val description = Description().apply {
            isEnabled = false
        }
        setDescription(description)

        // Init GridBackground
        setGridBackgroundColor(android.R.color.white)
        setDrawGridBackground(true)

        // Init Borders
        setDrawBorders(true)
        setBorderColor(android.R.color.black)
        setBorderWidth(1f)

        // Init Other Properties
        setPinchZoom(false)
        isDoubleTapToZoomEnabled = false
        isDragEnabled = true
        setNoDataText(context.getString(R.string.info_text_no_content))
        setScaleEnabled(true)

        // Init Legend
        val legend = legend.apply {
            isEnabled = false
        }

        // Init xAxis
        val xAxis = xAxis.apply {
            isEnabled = true
            setCenterAxisLabels(false)
            gridColor = android.R.color.white
            setAvoidFirstLastClipping(false)
            setDrawLimitLinesBehindData(true)
            position = XAxis.XAxisPosition.BOTTOM
        }


        // Init leftAxis
        val leftAxis = axisLeft.apply {
            axisMinimum = 0f
            setDrawAxisLine(false)
            setDrawZeroLine(true)
            setDrawGridLines(true)
            gridColor = android.R.color.black
            axisLineColor = android.R.color.black
        }

        val rightAxis = axisRight.apply {
            isEnabled = false
        }
    }

    fun setChartTitle(title: String) {
        val description = Description().apply {
            text = title
            isEnabled = true
        }
        setDescription(description)
    }
}

您可以将其添加到您的 xml 布局中，如下所示：

<path_to_your_class.DefaultLineChart
                    android:layout_width="match_parent"
                    android:layout_height="400dp"
                    android:layout_marginTop="16dp"/>

最后你可以像下面的代码一样绘制你的图表：

fun bindDefaultLineChart(chartView: LineChart,
                                 marketValues: List<MarketVal>?,
                                 label: String?) {
            if (marketValues == null) {
                return
            }

            val yValues = ArrayList<Entry>()
            var maxCount: Long = 0
            for (marketValue in marketValues) {
                val entry = Entry(marketValue.dateTime.toFloat(),
                        marketValue.transactionNumber.toFloat())
                yValues.add(entry)
                if (marketValue.transactionNumber > maxCount) {
                    maxCount = marketValue.transactionNumber.toLong()
                }
            }

            val xAxis = chartView.xAxis
            val xAxisFormatter = ChartValueDateFormatter(Constants.DEFAULT_DATE_FORMAT)
            xAxis.valueFormatter = xAxisFormatter

            chartView.axisLeft.apply {
                axisMaximum = (maxCount + MAX_CHAR_Y_AXIS_ADDITION).toFloat()
                valueFormatter = NonFloatValueFormatter()
            }

            val dataSet = LineDataSet(yValues, label).apply {
                axisDependency = YAxis.AxisDependency.LEFT
                color = ContextCompat.getColor(chartView.context, R.color.colorAccent)
                formLineWidth = 2f
                setDrawIcons(true)
                setDrawValues(false)
            }

            val lineData = LineData(dataSet)
            chartView.data = lineData
        }
}

您可以从 here 中找到示例实现。

如何像这张图片一样动态创建折线图

How to create line graph dynamically like this image

android

paint

android-graphview