如何在Kivy的Resumen界面集成自定义环形图表组件？

步骤1：整理PrecisionDonut组件 #

将PrecisionDonut类移至项目的组件目录（如app/components/PrecisionDonut.py），移除测试用的MainApp代码，保留核心图表逻辑，确保该类可被其他模块导入。

步骤2：修改Resumen页面的Python逻辑 #

在Resumen类中导入PrecisionDonut，添加图表实例属性，并调整数据加载逻辑以适配图表所需格式：

from kivy.uix.screenmanager import Screen
from app.components.CardMetrica import CardMetrica
from app.components.BotonNavegacion import BotonNavegacion
# 新增图表组件导入
from app.components.PrecisionDonut import PrecisionDonut
from kivy.properties import StringProperty, ObjectProperty
from kivy.clock import Clock
import sqlite3
import os
from kivy.lang import Builder
from data.database import (
    obtener_total_inversion_usd,
    obtener_acciones_portafolio,
)

kv_path = os.path.join(os.path.dirname(__file__), '..', '..', 'kv','screens','Resumen.kv')
Builder.load_file(kv_path)

class Resumen(Screen):
    total_investment = StringProperty("$ 0.00")
    # 新增属性保存图表实例
    donut_chart = ObjectProperty(None)

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.datos_cargados = False
        # 初始化空数据图表
        self.donut_chart = PrecisionDonut(data=[])
        # 延迟添加到布局，避免KV布局未初始化报错
        Clock.schedule_once(self._add_chart_to_layout)

    def _add_chart_to_layout(self, dt):
        # 向KV中定义的图表容器添加组件
        self.ids.chart_container.add_widget(self.donut_chart)

    def on_enter(self):
        """SE LLAMA CADA VEZ QUE ENTRAS A LA PANTALLA"""
        self.cargar_datos()

    def cargar_datos(self,dt=None):
        """Carga datos desde database.py"""
        try:
            # Total inversión
            total = obtener_total_inversion_usd()
            self.total_investment = f"$ {total:,.2f}"

            # Lista de acciones
            datos = obtener_acciones_portafolio()
            
            # 转换数据格式以适配PrecisionDonut
            # 需根据数据库实际返回字段调整key名称
            chart_data = []
            for accion in datos:
                chart_data.append({
                    'name': accion['nombre'],
                    'value': accion['valor_invertido']
                })
            
            # 处理空数据情况
            if not chart_data:
                chart_data = [{'name': 'Sin inversiones', 'value': 1}]
            
            # 更新图表数据并刷新
            self.donut_chart.data = chart_data
            self.donut_chart.update_chart()

        except Exception as e:
            print(f"Error cargando portafolio: {e}")

步骤3：修改Resumen页面的KV布局 #

在Resumen.kv中添加图表容器，为图表分配合适的显示空间：

<Resumen>:
    BoxLayout:
        orientation: "vertical"
        padding: dp(20)
        spacing: dp(15)

        # 总投资金额展示
        Label:
            text: root.total_investment
            font_size: '24sp'
            bold: True
            size_hint_y: None
            height: dp(40)
        
        # 环形图表容器
        BoxLayout:
            id: chart_container
            size_hint: 1, 0.7  # 占页面70%高度
            # 添加深色背景突出图表
            canvas.before:
                Color:
                    rgba: 0.1, 0.1, 0.1, 1
                Rectangle:
                    pos: self.pos
                    size: self.size
        
        # 原有页面组件（保留你的配置）
        CardMetrica:
            # 你的组件配置
        BotonNavegacion:
            # 你的组件配置

步骤4：关键细节调整 #

• 根据数据库实际返回的字段，修改chart_data转换逻辑中的key名称（如nombre、valor_invertido需匹配你的数据表字段）。
• 可调整KV布局中chart_container的size_hint、padding参数，适配整体页面设计。
• 图表的update_chart方法需手动调用，确保数据更新后图表实时刷新。

内容的提问来源于stack exchange，提问作者Jose Lopez