我无法在Android YCharts 中显示相同的数据

Question

我目前正在开发一个 Android 应用程序，使用 Jetpack Compose 和 co.yml.charts 库来渲染折线图。我面临的问题是，当数据集中的所有 y 值都相同时，图表无法正确呈现。折线图似乎无法完整显示或显示一条非常细的线，很难注意到。

Answer 1

理解问题

当数据集中的所有 Y 值都相同时，折线图在视觉上可能会变得不明确。某些图表库可能无法妥善处理这种边缘情况，导致线条根本不显示或几乎不可见。

根本原因分析

YCharts 库 依赖 Y 值的变化来确定线条的比例和视觉表示。当所有 Y 值相同时，自动缩放可能会崩溃，导致线条不存在或过于压缩而难以看到。

解决方案

解决此问题的关键是控制 Y 轴配置，以便即使在 Y 值相同的情况下也能正确可视化。 这个解决方案解决了我的问题，添加了最佳实践并克服了潜在的错误：

---

@Composable
fun LineChartScreen(graphData: List<Point>) { 

    // extract unique y-values from dataset and sort them
    val uniqueYValues = graphData.map { it.y }.distinct().sorted()

    // determine minimum and maximum values for empty lists
    val minYAxisValue = uniqueYValues.firstOrNull() ?: 0f
    val maxYAxisValue = uniqueYValues.lastOrNull() ?: 1f

    Column(modifier = Modifier.fillMaxSize()) { 
        LineChart(
            modifier = Modifier
                .fillMaxWidth() // occupy full width
                .height(250.dp), // set a fixed height

            properties = ChartProperties( 
                isZoomAllowed = false, // disable zooming
                isDragAllowed = false, // disable dragging
                paddingEnd = 16.dp,    // add some padding to the right
            ),

            lineChartData = LineChartData(
                points = graphData,
                lineStyle = LineStyle(
                    color = Color.Black, 
                    strokeWidth = 2.dp 
                )
            ),
            
            // x-axis configuration
            xAxisData = AxisData.Builder()
                .build(), 

            yAxisData = AxisData.Builder()
                .steps(min(2, max(1, uniqueYValues.size - 1))) // ensure 2 steps with one value
                .backgroundColor(Color.Transparent)           // make y-axis background transparent
                .labelAndAxisLinePadding(20.dp)              // add padding for readability
                .labelData { i ->                            // format labels
                    val yValue = uniqueYValues.getOrNull(i)
                    yValue?.let { String.format("%.2f", it) } ?: "" // format with 2 decimals
                }

                // style the y-axis using MaterialTheme
                .axisLineColor(MaterialTheme.colorScheme.onSurface) 
                .labelTextColor(MaterialTheme.colorScheme.onSurface)
                .axisLabelFontSize(12.sp)
                .build() 
        )
    }
}

---

1.带后备的 Y 值：

• 提取唯一的 Y 值。
• 如果

  uniqueYValues

  为空，则提供默认值（0f 和 1f）以防止错误。

2. Y 轴范围：

• 计算

  minYAxisValue

  和

  maxYAxisValue

  以设置 Y 轴的范围。当所有 Y 值相同时，它可以防止图表崩溃。

3.至少两个 Y 轴步长：

steps(min(2, max(1, uniqueYValues.size - 1)))

确保 Y 轴上至少有两个步骤，即使只有一个唯一值。这将创建一条代表恒定值的清晰水平线。

4. Y 轴标签格式：

• 使用

  String.format("%.2f", it)

  格式化 Y 轴标签，保留两位小数，以实现 CLEAN 原则。

5.错误处理和输入验证：

• 添加检查以处理

  graphData

  为空或包含无效值的情况。

其他提示：

• 自定义：探索 YCharts 库中的

  LineChartData

  和

  AxisData

  类以获取自定义选项，例如线条样式、颜色和标签格式。

• 替代方法：如果所有 Y 值都相同时折线图无法传达信息，请考虑使用不同的图表类型（条形图或点图）。