LineChartView-Compose

靜態(tài)折線圖表LineChartView来候，實(shí)時(shí)多通道波形LiveMultiLineChartView 跷叉，附帶濾波、FFT功能

2023-10-21 20-19-06 00_00_00-00_00_30.gif

代碼示例

LiveMultiLineChartView

private const val channels = 8
private val lineChartDataFlow = MutableStateFlow(FloatArray(channels))
private var lineChartStaticRefresh by mutableStateOf(false)
private var yMaxValue by mutableStateOf(100f)

@Composable
fun LiveMultiLineChartView(){
    /**
    * 實(shí)時(shí)多折線圖
    * @param modifier Modifier
    * @param lineChartDataFlow 折線數(shù)據(jù)flow
    * @param lineChartNum 折線數(shù)
    * @param lineChartColor 折線顏色
    * @param yMaxValue Y軸區(qū)間點(diǎn)最大值
    * @param yMinValue Y軸區(qū)間點(diǎn)最小值
    * @param isStaticRefresh 靜態(tài)波形刷新模式
    * @param showSerialNum 繪制通道序列號
    * @param numColor 序列號顏色
    * @param numSize 序列號size
    *
    * */
    LiveMultiLineChartView(Modifier.fillMaxSize(), lineChartDataFlow, channels,
                           Color.DarkGray, yMaxValue, -yMaxValue, lineChartStaticRefresh)
}

fun start(){
    thread{
        while(true){
            Thread.sleep(4)
            val data = (0..1000).random() / 10f
            lineChartDataFlow.tryEmit(data)
        }
    }
}

LineChartView

private val pointLists = Array(250){ i ->
    PointInfo(i.toFloat() * 4 , (sin(2 * Math.PI * 50.0 * (i / 250.0))).toFloat() * 2)
}.toList()
private val xAxisInfo = AxisInfo(listOf(
    ScaleInfo(0f, "0"),
    ScaleInfo(200f, "200"),
    ScaleInfo(400f, "400"),
    ScaleInfo(600f, "600"),
    ScaleInfo(800f, "800"),
    ScaleInfo(1000f, "1000")
), "Time (ms)")
private val yAxisInfo = AxisInfo(listOf(
    ScaleInfo(-10f, "-10"),
    ScaleInfo(-5f, "-5"),
    ScaleInfo(0f, "0"),
    ScaleInfo(5f, "5"),
    ScaleInfo(10f, "10"),
), "Amplitude (μV)", showScaleLine = false)

private val lineChartColors = arrayOf(
    Color.Gray,
    Color(0xFFFFA500),
)

@Composable
fun LineChartView(){
    /**
    * 靜態(tài)折線圖
    * @param modifier Modifier
    * @param pointLists 多折線點(diǎn)List數(shù)據(jù)
    * @param xAxisInfo X軸信息
    * @param yAxisInfo Y軸信息
    * @see com.zhzc0x.compose.chart.AxisInfo
    * @param colors 對應(yīng)每個(gè)折線顏色营搅，設(shè)置colors.size必須等于pointLists.size云挟，默認(rèn)每個(gè)折線顏色Color.Black
    * @param lineChartWidth 折線寬度
    *
    * */
    LineChartView(Modifier.fillMaxSize(), listOf(pointLists), xAxisInfo, yAxisInfo, lineChartColors)
}

項(xiàng)目地址：https://github.com/zhzc0x/linechart-compose 歡迎大家點(diǎn)贊評論，多提Issues