想使用Android kotlin图表的看过来

想使用Android kotlin图表的看过来

在这篇文章中，我将介绍一个有用的库，我在我的项目中使用它来创建图表：

• 折线图
  
• 条形图
  
• 环形图
  

接入步骤

添加依赖

implementation 'com.diogobernardino:williamchart:3.10.1'

创建Activity

我希望每个图表都有单独的Activity，所以我创建了 3 个Activity：

▶ BarChartActivity.kt + XML布局

▶ LineChartActivity.kt + XML布局

▶ DonutChartActivity.kt + XML布局

使用 MainActivity + XML

<Button
        android:id="@+id/btnBarChart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bar Chart"
        app:layout_constraintBottom_toTopOf="@id/btnDonutChart"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:backgroundTint="#0D47A1"/>

    <Button
        android:id="@+id/btnDonutChart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Donut Chart"
        app:layout_constraintBottom_toTopOf="@id/btnLineChart"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btnBarChart"
        android:backgroundTint="#0D47A1"/>

    <Button
        android:id="@+id/btnLineChart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Line Chart"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btnDonutChart"
        android:backgroundTint="#0D47A1"/>

在 Kotlin 文件 [MainActivity.kt] 中，我想管理这些按钮以转到每个相关Activity：

 binding.apply {
            btnBarChart.setOnClickListener {
                startActivity(Intent(this@MainActivity, BarChartActivity::class.java))
            }
            btnDonutChart.setOnClickListener {
                startActivity(Intent(this@MainActivity, DonutChartActivity::class.java))
            }
            btnLineChart.setOnClickListener {
                startActivity(Intent(this@MainActivity, LineChartActivity::class.java))
            }

创建条形图

要将条形图添加到您的 xml 中，您应该调用我们之前添加的库的视图，例如：

对于垂直条形图：

<com.db.williamchart.view.BarChartView
        android:id="@+id/barChart"
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        app:chart_axis="x"
        app:chart_barsColor="#fff"
        app:chart_barsRadius="4dp"
        app:chart_labelsColor="#0D47A1"
        app:chart_labelsSize="10sp"
        app:chart_spacing="15dp"
        app:layout_constraintBottom_toTopOf="@+id/barChartHorizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

对于水平条形图：

<com.db.williamchart.view.HorizontalBarChartView
        android:id="@+id/barChartHorizontal"
        android:layout_width="0dp"
        android:layout_height="150dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        app:chart_axis="x"
        app:chart_barsColor="#fff"
        app:chart_barsRadius="4dp"
        app:chart_labelsColor="#0D47A1"
        app:chart_labelsSize="10sp"
        app:chart_spacing="15dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/barChart" />

此视图有一些您可以更改的特殊属性，这些属性称为：

app:chart_... = ...

现在是时候在我们的Activity中管理这个条形图了：

BarChartActivity.kt

 binding.apply {

            barChart.animation.duration = animationDuration
            barChart.animate(barSet)

            barChartHorizontal.animation.duration = animationDuration
            barChartHorizontal.animate(horizontalBarSet)

        }

barSet和horizontalBarSet变量是我们用于制作图表的模拟数据：

companion object {

        private val barSet = listOf(
            "JAN" to 4F,
            "FEB" to 7F,
            "MAR" to 2F,
            "MAY" to 2.3F,
            "APR" to 5F,
            "JUN" to 4F
        )

        private val horizontalBarSet = listOf(
            "PORRO" to 5F,
            "FUSCE" to 6.4F,
            "EGET" to 3F
        )

        private const val animationDuration = 1000L
    }

创建圆环图

首先，我们需要将圆环图添加到我们的 xml 中，我可以调用之前添加的库的视图，例如：

<com.db.williamchart.view.DonutChartView
        android:id="@+id/donutChart"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        app:chart_donutBackgroundColor="#42A5F5"
        app:chart_donutRoundCorners="true"
        app:chart_donutThickness="15dp"
        app:chart_donutTotal="200"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

现在我可以在 DonutChartActivity 中将模拟数据设置到图表中：

       binding.apply {
            donutChart.donutColors = intArrayOf(
                Color.parseColor("#FFFFFF"),
                Color.parseColor("#9EFFFFFF"),
                Color.parseColor("#8DFFFFFF")
            )
            donutChart.animation.duration = animationDuration
            donutChart.animate(donutSet)
        }

donutSet ：

companion object {

        private val donutSet = listOf(
            20f,
            80f,
            100f
        )

        private const val animationDuration = 1000L
    }

创建折线图

所以，将视图添加到折线图 XML 中：

<TextView
        tools:text="Chart Data"
        android:id="@+id/tvChartData"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintBottom_toTopOf="@id/lineChart" />

    <com.db.williamchart.view.LineChartView
        android:id="@+id/lineChart"
        android:layout_width="0dp"
        android:layout_height="70dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        app:chart_axis="none"
        app:chart_gridEffect="dotted"
        app:chart_labelsColor="#0D47A1"
        app:chart_labelsSize="10sp"
        app:chart_lineColor="#ffffff"
        app:chart_lineThickness="3dp"
        app:chart_smoothLine="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

文本视图将用于显示折线图数据

然后让我们完成相关的Activity：

LineChartActivity.kt

binding.apply {
            lineChart.gradientFillColors =
                intArrayOf(
                    Color.parseColor("#81FFFFFF"),
                    Color.TRANSPARENT
                )
            lineChart.animation.duration = animationDuration
            lineChart.onDataPointTouchListener = { index, _, _ ->
                tvChartData.text =
                    lineSet.toList()[index]
                        .second
                        .toString()
            }
            lineChart.animate(lineSet)
        }

在此代码中，我向折线图添加了触摸侦听器，它可以将字符上的每个数据显示到Textview中，或者您可以使用此数据做任何您想做的事情

我用于此图表的模拟数据是：

companion object {
        private val lineSet = listOf(
            "label1" to 5f,
            "label2" to 4.5f,
            "label3" to 4.7f,
            "label4" to 3.5f,
            "label5" to 3.6f,
            "label6" to 7.5f,
            "label7" to 7.5f,
            "label8" to 10f,
            "label9" to 5f,
            "label10" to 6.5f,
            "label11" to 3f,
            "label12" to 4f
        )

        private const val animationDuration = 1000L
    }

大功告成,代码现在可以运行了。

最后附上源码链接：

https://github.com/ezatpanah/Chart-in-Kotlin-Youtube