MPAndroidChart的简单使用（下）

MarkerView完成点击显现数值

MarkerView 用来完成和图表的高亮联动，在点击图表时高亮点击区域，MarkerView用来显现点击区域的(x,y)值。能够经过承继完成一个符合主题的MarkerView。

先为MarkerView写一个布局文件:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg_marker"
    android:elevation="12dp"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:paddingHorizontal="8dp">
    <TextView
        android:id="@+id/tv_y"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="10dp"
        android:lines="1"
        android:textColor="@color/white"
        tools:text="title" />
    <TextView
        android:id="@+id/tv_x"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="medium"
        android:textColor="@color/white"
        android:textSize="10sp" />
</LinearLayout>

承继完成MarkerView，自定义MarkerView的款式和显现方位：

class MyMarkerView(context: Context?, layoutResource: Int) : MarkerView(context, layoutResource) {
     private val tvX: TextView
    private val tvY: TextView
    init {
        tvX = findViewById(R.id.tv_x)
        tvY = findViewById(R.id.tv_y)
    }
  //    设置显现的内容
    override fun refreshContent(e: Entry?, highlight: Highlight?) {
      tvY.setText(e?.y.toString())
      tvX.setText(e?.x?.toInt().toString())
      super.refreshContent(e, highlight)        //注意，没有super的话布局无法动态改动，比方动态改动宽高之类的，或者wrap_content没办法正常包裹内容，内容显现不完全
    }
  //设置MarkerView的方位
    override fun getOffset(): MPPointF {
        return MPPointF(-width / 2f, -height.toFloat()-40)       //柱状图的正上方
    }
}

运用非常方便，将MarkerView设置给Chart并进行双向绑定即可：

lateinit var myMarkerView: MyMarkerView
myMarkerView = MyMarkerView(context, R.layout.my_marker_view)    //将布局设置给MarkerView
report_bc_step.marker = myMarkerView    //将MarkerView设置给图表
myMarkerView.chartView = report_bc_step    //双向绑定

MPAndroidChart的其他图表

前面内容都是根据柱状图进行打开的，但其他图表的运用和功用拓展都是差不多的。MPAndroidChart还能够完成饼图PieChart、折线图LineChartBar、散点图ScatterChart、气泡图BubbleChart、组合图表CombinedChart等。

饼图

饼图是比较常用的图表，它的运用比较简单：

<com.github.mikephil.charting.charts.PieChart
            android:id="@+id/pie_chart"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1" />

饼图的数据条目能够不填入数值，而是填入条意图名称或图标：

private fun initPieChart() {
        val pieData = arrayListOf<PieEntry>()
        //条目名
        val label = arrayOf("荔枝", "葡萄", "草莓", "芒果", "西瓜", "桃子")
        val colors = arrayListOf<Int>(    //用于设置各条意图色彩
            getColor(R.color.purple_200),
            getColor(R.color.purple_500),
            getColor(R.color.purple_700),
            getColor(R.color.color_6C391C),
            getColor(R.color.teal_200),
            getColor(R.color.teal_700)
        )
        for (i in 1..5) {
            //第一个参数表示占比，第二个参数填入条目名称
            val pieEntry = PieEntry(i.toFloat(), label.get(i - 1))
            pieData.add(pieEntry)
        }
        val pieDataSet = PieDataSet(pieData, "pie")
        pieDataSet.setColors(colors)
        pieDataSet.setDrawValues(false)
        viewBinding.pieChart.run {
            clear()
            data = PieData(pieDataSet)
            notifyDataSetChanged()
        }
    }

折线图

折线图运用起来也很简单：

<com.github.mikephil.charting.charts.LineChart
            android:id="@+id/line_chart"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1"/>

运用比较简单，数据条目填入的x、y值：

private fun initLineChart() {
        val lineData = arrayListOf<Entry>()
        for (i in 0..11) {
            val value = Random(i).nextFloat()
            val barEntry = Entry(i.toFloat(), value)  //填入x、y值
            lineData.add(barEntry)
        }
        val lineDataSet = LineDataSet(lineData, "line")
        viewBinding.lineChart.run {
            data = LineData(lineDataSet)
            notifyDataSetChanged()
        }
    }

组合图表

运用组合图表时，只需要将想要组合的图表的数据增加到CombinedData中，将CombinedData设置到CombinedChart中就行了。

CombinedData支撑多种数据格式，包括柱状图、散点图、折线图，但不能设置饼图数据，以下是设置了气泡图数据和折线图数据的组合图表：

<com.github.mikephil.charting.charts.CombinedChart
            android:id="@+id/combined_chart"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1:1"/>

设置数据：

private val combinedData=CombinedData()
combinedData.setData(bubleData)    //增加气泡图的数据
combinedData.setData(lineData)    //增加折线图的数据
private fun initCombinedChart(){
        viewBinding.combinedChart.run {
            data= this@MainActivity.combinedData
            notifyDataSetChanged()
        }
    }