在这篇文章中,我将介绍一个有用的库,我在我的项目中使用它来创建图表:
implementation 'com.diogobernardino:williamchart:3.10.1'
我希望每个图表都有单独的Activity,所以我创建了 3 个Activity:
▶ BarChartActivity.kt + XML布局
▶ LineChartActivity.kt + XML布局
▶ DonutChartActivity.kt + 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