0%

安卓图表MpAndroidChart使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
repositories {
maven { url 'https://jitpack.io' }
}

dependencies {
implementation 'com.github.PhilJay:MPAndroidChart:v3.1.0'
}

布局引用
<com.github.mikephil.charting.charts.CombinedChart
android:id="@+id/combinedChart"
android:layout_width="350dp"
android:layout_height="270dp"
android:layout_margin="20dp"
app:layout_constraintTop_toBottomOf="@+id/toolbar"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
/>


private lateinit var lineDataSet: LineDataSet//折线数据集

/** 初始化 CombinedChart **/
private fun setupChart() {
val chart = binding.combinedChart
// 折线数据集 参数设置
lineDataSet = LineDataSet(mutableListOf(Entry(0f, 0f)), "实时曲线").apply {
color = ColorTemplate.rgb("1E88E5")
lineWidth = 2f
setDrawCircles(false)
setDrawValues(false)
setDrawFilled(true) // 曲线下方填充
mode = LineDataSet.Mode.CUBIC_BEZIER // 平滑曲线 LINEAR
axisDependency = YAxis.AxisDependency.LEFT
}
lineDataSet.setDrawFilled(true)
lineDataSet.fillColor = Color.parseColor("#82F689") // 填充颜色
lineDataSet.fillAlpha = 80 // 透明度 0~255



// 曲面折线
redDataSet = LineDataSet(mutableListOf(), "GC 谱图").apply {
setDrawHorizontalHighlightIndicator(false)
setDrawVerticalHighlightIndicator(false)
lineWidth = 0f // 安全
color = Color.TRANSPARENT // 即使透明也不影响
mode = LineDataSet.Mode.LINEAR // 不要贝塞尔

setCircleColor(Color.RED) // 圆点颜色为红色
setDrawCircleHole(false) // 圆点不留白
setDrawCircles(true) // 不画圆点
setDrawFilled(false) // 曲线下方填充
fillColor = Color.TRANSPARENT
}


val lineData = LineData(redDataSet,lineDataSet)

// 柱状数据集(初始化为空)
barDataSet = BarDataSet(mutableListOf(), "目标气体峰").apply {
color = Color.RED
}
val barData = BarData(barDataSet).apply { barWidth = 0.8f }

// CombinedData
val combinedData = CombinedData().apply {
setData(lineData)
setData(barData)
}
chart.data = combinedData

// 限制最大缩放比例
chart.viewPortHandler.setMaximumScaleX(Float.MAX_VALUE) // X轴无限放大
chart.viewPortHandler.setMinimumScaleX(0f) // 无限缩小(到很小)
chart.viewPortHandler.setMaximumScaleY(Float.MAX_VALUE) // Y轴无限放大
chart.viewPortHandler.setMinimumScaleY(0f) // 无限缩小

// X轴设置
chart.xAxis.apply {
position = XAxis.XAxisPosition.BOTTOM
granularity = 1f
axisMinimum = 0f
}

// Y轴设置
// chart.axisLeft.apply {
// axisMinimum = 0f
// valueFormatter = object : ValueFormatter() {
// override fun getFormattedValue(value: Float): String = "${value.toInt()} mV"
// }
// setAxisMinValue(0f)//强制y轴最小值
// }
chart.axisLeft.apply {
axisMinimum = 0f // 下限固定 0(PID 不会为负)
spaceTop = 80f // 上方预留 20%,防止贴顶
spaceBottom = 5f // 下方预留一点更美观
setDrawGridLines(true)
setDrawZeroLine(false)

// Y 轴单位
valueFormatter = object : ValueFormatter() {
override fun getFormattedValue(value: Float): String = "${value.toInt()} mV"
}
}

chart.axisRight.isEnabled = false

// 缩放 + 拖动 + 图表一次最多能看到多少 X 点(宽度限制)
chart.setScaleEnabled(true)
chart.setPinchZoom(true)
chart.setVisibleXRangeMaximum(maxVisiblePoints)

chart.description.isEnabled = false



//替换默认的renderer为自定义的SampleHighlightRenderer,画高亮区间
val highlightPaint = Paint().apply {
style = Paint.Style.FILL
color = Color.parseColor("#5533B5E5") // 半透明蓝色
}
val renderer = SampleHighlightRenderer(binding.combinedChart, binding.combinedChart.viewPortHandler, highlightPaint)
binding.combinedChart.renderer = renderer


//设置高亮的mark
// val marker = MyMarkerView(this)
// marker.chartView = binding.combinedChart
// binding.combinedChart.marker = marker
//
// chart.isHighlightPerTapEnabled = true
// chart.isHighlightPerDragEnabled = true
chart.invalidate()
}



private fun addGCPoint(value: Float) {
val chart = binding.combinedChart
val entry = Entry(xIndex, value)

xIndex += 1f

lineDataSet.addEntry(entry)
if(xIndex == 10f || xIndex == 20f){
redDataSet.addEntry(entry)
}


chart.data.lineData.notifyDataChanged()
chart.data.notifyDataChanged()
chart.notifyDataSetChanged()

// 固定显示最近 maxVisiblePoints 个点
if (lineDataSet.entryCount > maxVisiblePoints) {
chart.setVisibleXRangeMaximum(maxVisiblePoints)
chart.moveViewToX(lineDataSet.entryCount - maxVisiblePoints)
} else {
chart.moveViewToX(0f)
}

chart.invalidate()

}