将Matplotlib图添加到KivyMD中的小部件 [英] Add a Matplotlib Graph to a Widget in KivyMD
问题描述
我目前正在使用KivyMD创建一个移动应用程序，用于管理差旅费用请求.用户将在MDTextField上为不同类型的费用输入所需的请求金额.我想将用patplotlib制作的 donut 图添加到MDBoxLayout中.此类图应在满足请求时自动更新. (为清楚起见，我将包括一个屏幕截图.红色正方形是图形的理想位置.)
I am currently creating a mobile app with KivyMD which serves for managing travel expense requests. The user will enter a desired requested amount for different types of expenses on an MDTextField. I want to add a donut graph made with patplotlib into an MDBoxLayout. Such graph should automatically update as the request is filled. (For clarity I will include a screenshot. The square in red is the desired location for my graph).
我创建了一个名为update_method_graph的方法，并使用了固定数字，并且可以成功创建Plot，但是在应用程序上添加此类图却没有成功.一旦我可以成功地将图形添加到我的应用程序中，我便会将这些值链接到用户添加的请求.现在，我要关注的是正确添加图形.当然，完成的代码将不包含plt.show()行，该图应直接在应用程序上更新.
I created a method called update_method_graph and used fixed numbers and I can successfully create a Plot, however I have not been successful on adding such graph on the app. Once I can succesfully add the graph to my app I will link such values to the requests added by the user. For now my concern is to add the graph correctly. Of course the finished code will not include the plt.show() line, the graph should be updated directly on the app.
就目前而言，当我关闭图形窗口时，我的代码显示错误
As for now, when I close the window of the graph, my code shows an error in
self.ids.expense_graph.add_widget(FigureCanvasKivyAgg(plt.gcf()))
File "kivy\properties.pyx", line 863, in kivy.properties.ObservableDict.__getattr__
AttributeError: 'super' object has no attribute '__getattr__'`
出现 expense_graph 中的键错误.
我已经尝试过使用一个类似问题的答案和matplotlib.use('module://kivy.garden.matplotlib.backend_kivy')中建议的from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg在在garden.matplotlib中使用的示例中但是我仍然无法使我的应用正常工作.
I have tried with from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg suggested in an answer to a similar question and with matplotlib.use('module://kivy.garden.matplotlib.backend_kivy'), as done in examples of use in garden.matplotlib however I still can't get my app to work.
最小可复制示例代码
Python代码:
from kivy.properties import ObjectProperty
from kivy.uix.screenmanager import ScreenManager, Screen
from kivymd.app import MDApp
from kivymd.uix.expansionpanel import MDExpansionPanel, MDExpansionPanelOneLine
from kivy.uix.boxlayout import BoxLayout
import matplotlib.pyplot as plt
from kivy.garden.matplotlib.backend_kivyagg import FigureCanvasKivyAgg
from kivy.uix.image import Image
class MyContentAliment(BoxLayout):
monto_alimento = 0
def apply_currency_format(self):
# if len <= 3
if len(self.ids.monto_aliment_viaje.text) <= 3 and self.ids.monto_aliment_viaje.text.isnumeric():
self.ids.monto_aliment_viaje.text = "$" + self.ids.monto_aliment_viaje.text + '.00'
# n,nnn
elif len(self.ids.monto_aliment_viaje.text) == 4 and self.ids.monto_aliment_viaje.text.isnumeric():
self.ids.monto_aliment_viaje.text = "$" + self.ids.monto_aliment_viaje.text[0] + "," + \
self.ids.monto_aliment_viaje.text[1:] + '.00'
# nn,nnn
elif len(self.ids.monto_aliment_viaje.text) == 5 and self.ids.monto_aliment_viaje.text.isnumeric():
self.ids.monto_aliment_viaje.text = "$" + self.ids.monto_aliment_viaje.text[:2] + "," + \
self.ids.monto_aliment_viaje.text[2:] + '.00'
def limit_currency(self):
if len(self.ids.monto_aliment_viaje.text) > 5 and self.ids.monto_aliment_viaje.text.startswith('$') == False:
self.ids.monto_aliment_viaje.text = self.ids.monto_aliment_viaje.text[:-1]
def sumar_gasto(self):
if self.ids.monto_aliment_viaje.text == "":
pass
elif self.ids.monto_aliment_viaje.text.startswith('$'):
pass
else:
travel_manager = MDApp.get_running_app().root.get_screen('travelManager')
monto_total = float(travel_manager.ids.suma_solic_viaje.text[2:])
monto_total += float(self.ids.monto_aliment_viaje.text)
travel_manager.ids.suma_solic_viaje.text = "$ " + str(monto_total)
self.apply_currency_format()
# USE THIS METHOD TO UPDATE THE VALUE OF ALIMENTOS (donut)
def update_requested_value(self):
MyContentAliment.monto_alimento = 0
if len(self.ids.monto_aliment_viaje.text) > 0:
MyContentAliment.monto_alimento = self.ids.monto_aliment_viaje.text
else:
MyContentAliment.monto_alimento = 0
TravelManagerWindow.update_donut_graph(MyContentAliment.monto_alimento)
class MyContentCasetas(BoxLayout):
monto_casetas = 0
def apply_currency_format(self):
# if len <= 3
if len(self.ids.monto_casetas_viaje.text) <= 3 and self.ids.monto_casetas_viaje.text.isnumeric():
self.ids.monto_casetas_viaje.text = "$" + self.ids.monto_casetas_viaje.text + '.00'
# n,nnn
elif len(self.ids.monto_casetas_viaje.text) == 4 and self.ids.monto_casetas_viaje.text.isnumeric():
self.ids.monto_casetas_viaje.text = "$" + self.ids.monto_casetas_viaje.text[0] + "," + \
self.ids.monto_casetas_viaje.text[1:] + '.00'
# nn,nnn
elif len(self.ids.monto_casetas_viaje.text) == 5 and self.ids.monto_casetas_viaje.text.isnumeric():
self.ids.monto_casetas_viaje.text = "$" + self.ids.monto_casetas_viaje.text[:2] + "," + \
self.ids.monto_casetas_viaje.text[2:] + '.00'
def limit_currency(self):
if len(self.ids.monto_casetas_viaje.text) > 5 and self.ids.monto_casetas_viaje.text.startswith('$') == False:
self.ids.monto_casetas_viaje.text = self.ids.monto_casetas_viaje.text[:-1]
def sumar_gasto(self):
if self.ids.monto_casetas_viaje.text == "":
pass
elif self.ids.monto_casetas_viaje.text.startswith('$'):
pass
else:
travel_manager = MDApp.get_running_app().root.get_screen('travelManager')
monto_total = float(travel_manager.ids.suma_solic_viaje.text[2:])
monto_total += float(self.ids.monto_casetas_viaje.text)
travel_manager.ids.suma_solic_viaje.text = "$ " + str(monto_total)
self.apply_currency_format()
# USE THIS METHOD TO UPDATE THE VALUE OF CASETAS (donut)
def update_requested_value(self):
MyContentCasetas.monto_casetas = 0
if len(self.ids.monto_casetas_viaje.text) > 0:
MyContentCasetas.monto_casetas = self.ids.monto_casetas_viaje.text
else:
MyContentCasetas.monto_casetas = 0
TravelManagerWindow.update_donut_graph(MyContentCasetas.monto_casetas)
class MyContentGasolina(BoxLayout):
monto_gasolina = 0
def apply_currency_format(self):
# if len <= 3
if len(self.ids.monto_gas_viaje.text) <= 3 and self.ids.monto_gas_viaje.text.isnumeric():
self.ids.monto_gas_viaje.text = "$" + self.ids.monto_gas_viaje.text + '.00'
# n,nnn
elif len(self.ids.monto_gas_viaje.text) == 4 and self.ids.monto_gas_viaje.text.isnumeric():
self.ids.monto_gas_viaje.text = "$" + self.ids.monto_gas_viaje.text[0] + "," + \
self.ids.monto_gas_viaje.text[1:] + '.00'
# nn,nnn
elif len(self.ids.monto_gas_viaje.text) == 5 and self.ids.monto_gas_viaje.text.isnumeric():
self.ids.monto_gas_viaje.text = "$" + self.ids.monto_gas_viaje.text[:2] + "," + \
self.ids.monto_gas_viaje.text[2:] + '.00'
def limit_currency(self):
if len(self.ids.monto_gas_viaje.text) > 5 and self.ids.monto_gas_viaje.text.startswith('$') == False:
self.ids.monto_gas_viaje.text = self.ids.monto_gas_viaje.text[:-1]
def sumar_gasto(self):
if self.ids.monto_gas_viaje.text == "":
pass
elif self.ids.monto_gas_viaje.text.startswith('$'):
pass
else:
travel_manager = MDApp.get_running_app().root.get_screen('travelManager')
monto_total = float(travel_manager.ids.suma_solic_viaje.text[2:])
monto_total += float(self.ids.monto_gas_viaje.text)
travel_manager.ids.suma_solic_viaje.text = "$ " + str(monto_total)
self.apply_currency_format()
# USE THIS METHOD TO UPDATE THE VALUE OF GASOLINA (donut)
def update_requested_value(self):
MyContentGasolina.monto_gasolina = 0
if len(self.ids.monto_gas_viaje.text) > 0:
MyContentGasolina.monto_gasolina = self.ids.monto_gas_viaje.text
else:
MyContentGasolina.monto_gasolina = 0
TravelManagerWindow.update_donut_graph \
(MyContentGasolina.monto_gasolina)
class LoginWindow(Screen):
pass
class TravelManagerWindow(Screen):
panel_container = ObjectProperty(None)
expense_graph = ObjectProperty(None)
# EXPANSION PANEL PARA SOLICITAR GV
def set_expansion_panel(self):
self.ids.panel_container.clear_widgets()
# FOOD PANEL
self.ids.panel_container.add_widget(MDExpansionPanel(icon="food", content=MyContentAliment(),
panel_cls=MDExpansionPanelOneLine(text="Alimentacion")))
# CASETAS PANEL
self.ids.panel_container.add_widget(MDExpansionPanel(icon="food", content=MyContentCasetas(),
panel_cls=MDExpansionPanelOneLine(text="Casetas")))
# GAS PANEL
self.ids.panel_container.add_widget(MDExpansionPanel(icon="food", content=MyContentGasolina(),
panel_cls=MDExpansionPanelOneLine(text="Gasolina")))
def update_donut_graph(self):
travel_manager = MDApp.get_running_app().root.get_screen('travelManager')
travel_manager.ids.expense_graph.clear_widgets()
# create data
names = 'Alimentación', 'Casetas', 'Gasolina',
data_values = [MyContentAliment.monto_alimento, MyContentCasetas.monto_casetas,
MyContentGasolina.monto_gasolina]
# Create a white circle for the center of the plot
my_circle = plt.Circle((0, 0), 0.65, color='white')
# Create graph, add and place percentage labels
# Add spaces to separate elements from the donut
explode = (0.05, 0.05, 0.05)
plt.pie(data_values, autopct="%.1f%%", startangle=0, pctdistance=0.80, labeldistance=1.2, explode=explode)
p = plt.gcf()
p.gca().add_artist(my_circle)
# Create and place legend of the graph
plt.legend(labels=names, loc="center")
# Add graph to Kivy App
plt.show()
# THE DESIRED RESULT IS TO ADD THE GRAPH TO THE APP WITH THE LINE OF CODE BELOW, INSTEAD OF THE plt.show() line
travel_manager.ids.expense_graph.add_widget(Image(source='donut_graph_image.png'))
# WINDOW MANAGER ################################
class WindowManager(ScreenManager):
pass
class ReprodExample3(MDApp):
travel_manager_window = TravelManagerWindow()
def build(self):
self.theme_cls.primary_palette = "Teal"
return WindowManager()
if __name__ == "__main__":
ReprodExample3().run()
KV代码:
<WindowManager>:
LoginWindow:
TravelManagerWindow:
<LoginWindow>:
name: 'login'
MDRaisedButton:
text: 'Enter'
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
size_hint: None, None
on_release:
root.manager.transition.direction = 'up'
root.manager.current = 'travelManager'
<TravelManagerWindow>:
name:'travelManager'
on_pre_enter: root.set_expansion_panel()
MDRaisedButton:
text: 'Back'
pos_hint: {'center_x': 0.5, 'center_y': 0.85}
size_hint: None, None
on_release:
root.manager.transition.direction = 'down'
root.manager.current = 'login'
BoxLayout:
orientation: 'vertical'
size_hint:1,0.85
pos_hint: {"center_x": 0.5, "center_y":0.37}
adaptive_height:True
height: self.minimum_height
ScrollView:
adaptive_height:True
GridLayout:
size_hint_y: None
cols: 1
row_default_height: root.height*0.10
height: self.minimum_height
BoxLayout:
adaptive_height: True
orientation: 'horizontal'
GridLayout:
id: panel_container
size_hint_x: 0.6
cols: 1
adaptive_height: True
BoxLayout:
size_hint_x: 0.05
MDCard:
id: resumen_solicitud
size_hint: None, None
size: "250dp", "350dp"
pos_hint: {"top": 0.9, "center_x": .5}
elevation: 0.1
BoxLayout:
orientation: 'vertical'
canvas.before:
Color:
rgba: 0.8, 0.8, 0.8, 1
Rectangle:
pos: self.pos
size: self.size
MDLabel:
text: 'Monto Total Solicitado'
font_style: 'Button'
halign: 'center'
font_size: (root.width**2 + root.height**2) / 15.5**4
size_hint_y: 0.2
MDSeparator:
height: "1dp"
MDTextField:
id: suma_solic_viaje
text: "$ 0.00"
bold: True
line_color_normal: app.theme_cls.primary_color
halign: "center"
size_hint_x: 0.8
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
MDSeparator:
height: "1dp"
# DESIRED LOCATION FOR THE MATPLOTLIB GRAPH
MDBoxLayout:
id: expense_graph
<MyContentAliment>:
adaptive_height: True
MDBoxLayout:
orientation:'horizontal'
adaptive_height:True
size_hint_x:self.width
pos_hint: {"center_x":0.5, "center_y":0.5}
spacing: dp(10)
padding_horizontal: dp(10)
MDLabel:
text: 'Monto:'
multiline: 'True'
halign: 'center'
pos_hint: {"x":0, "top":0.5}
size_hint_x: 0.15
font_style: 'Button'
font_size: 19
MDTextField:
id: monto_aliment_viaje
hint_text: 'Monto a solicitar'
pos_hint: {"x":0, "top":0.5}
halign: 'left'
size_hint_x: 0.3
helper_text: 'Ingresar el monto a solicitar'
helper_text_mode: 'on_focus'
write_tab: False
required: True
on_text: root.limit_currency()
MDRaisedButton:
id: boton_aliment_viaje
pos_hint: {"x":0, "top":0.5}
text:'Ingresar Gasto'
on_press:
root.update_requested_value()
on_release:
root.sumar_gasto()
### CASETAS
<MyContentCasetas>:
adaptive_height: True
MDBoxLayout:
orientation:'horizontal'
adaptive_height:True
size_hint_x:self.width
pos_hint: {"center_x":0.5, "center_y":0.5}
spacing: dp(10)
padding_horizontal: dp(10)
MDLabel:
text: 'Monto:'
multiline: 'True'
halign: 'center'
pos_hint: {"x":0, "top":0.5}
size_hint_x: 0.15
font_style: 'Button'
font_size: 19
MDTextField:
id: monto_casetas_viaje
hint_text: 'Monto a solicitar'
pos_hint: {"x":0, "top":0.5}
halign: 'left'
size_hint_x: 0.3
helper_text: 'Ingresar el monto a solicitar'
helper_text_mode: 'on_focus'
write_tab: False
#input_filter: 'float'
required: True
on_text: root.limit_currency()
MDRaisedButton:
id: boton_casetas_viaje
pos_hint: {"x":0, "top":0.5}
text:'Ingresar Gasto'
on_press:
root.update_requested_value()
on_release:
root.sumar_gasto()
BoxLayout:
size_hint_x: 0.05
### GASOLINA
<MyContentGasolina>:
adaptive_height: True
MDBoxLayout:
orientation:'horizontal'
adaptive_height:True
size_hint_x:self.width
pos_hint: {"center_x":0.5, "center_y":0.5}
spacing: dp(10)
padding_horizontal: dp(10)
MDLabel:
text: 'Monto:'
multiline: 'True'
halign: 'center'
pos_hint: {"x":0, "top":0.5}
size_hint_x: 0.15
font_style: 'Button'
font_size: 19
MDTextField:
id: monto_gas_viaje
hint_text: 'Monto a solicitar'
pos_hint: {"x":0, "top":0.5}
halign: 'left'
size_hint_x: 0.3
helper_text: 'Ingresar el monto a solicitar'
helper_text_mode: 'on_focus'
write_tab: False
required: True
on_text: root.limit_currency()
MDRaisedButton:
id: boton_gas_viaje
pos_hint: {"x":0, "top":0.5}
text:'Ingresar Gasto'
on_press:
root.update_requested_value()
on_release:
root.sumar_gasto()
BoxLayout:
size_hint_x: 0.05
对我的代码的任何建议或更正将不胜感激.提前非常感谢.
Any suggestions or corrections of my code will be greatly appreciated. Thanks a lot in advance.
编辑 我设法将MDTextFields链接到图中的数据值.因此，该图将随着输入值而更新.每次添加值时，都会显示一个更新的图形，以便您自己查看(最小可复制示例的代码已更新).但是，我仍然无法将图形添加到我的应用程序中.非常感谢您的帮助.提前非常感谢！
EDIT I managed to link the MDTextFields to the data values in the graph. So the graph will update as values are entered. Every time you add a value, an updated graph will appear so you can see it for yourself (code of minimal reproducible example is already updated). I am, nevertheless, still unable to add the graph to my App. I will greatly appreciate your help. Thanks a lot in advance!
编辑#2
我改变了方法，决定将图形转换为Image，然后将Image添加到MDBoxLayout. (如果第一种方法更好，请告诉我).该代码已经更新.但是我得到一个错误:
I changed my approach, I decided to convert the graph into an Image, and add the Image to a MDBoxLayout. (If the first approach is better please let me know). The code is already updated. However I get an error:
self.ids.expense_graph.add_widget(updated_graph)
AttributeError: 'str' object has no attribute 'ids'
我在网上搜索了针对此错误的不同解决方案，但我无法解决此问题.
I have searched on the web for different solutions to this error however I can't fix this.
编辑3
所以我终于能够解决EDIT 2上描述的错误代码.我能够将我的图形正确地添加到App中.但是，该图不会用新的支出进行更新(尽管文件确实已更新，并且plt.show()代码行确实显示了更新的图).知道为什么应用程序中的图形无法更新吗?最小可复制示例代码已更新.
So I finally was able to solve the error code described on EDIT 2. I am able to add my graph correctly to the App. However the graph is not updated with new expenses (although the file does update and the plt.show() line of code does show an updated graph). Any idea why the graph in the app is failing to update? Code for Minimal Reproducible Example is already updated.
推荐答案
我认为您只需要在每次更改后重新构建图即可.尝试将您的update_donut_graph()更改为:
I think you just need to rebuild the plot with each change. Try changing your update_donut_graph() to:
def update_donut_graph(self):
plt.clf() # clear the plot
travel_manager = MDApp.get_running_app().root.get_screen('travelManager')
travel_manager.ids.expense_graph.clear_widgets()
# create data
names = 'Alimentación', 'Casetas', 'Gasolina',
data_values = [MyContentAliment.monto_alimento, MyContentCasetas.monto_casetas,
MyContentGasolina.monto_gasolina]
# Create a white circle for the center of the plot
my_circle = plt.Circle((0, 0), 0.65, color='white')
# Create graph, add and place percentage labels
# Add spaces to separate elements from the donut
explode = (0.05, 0.05, 0.05)
plt.pie(data_values, autopct="%.1f%%", startangle=0, pctdistance=0.80, labeldistance=1.2, explode=explode)
p = plt.gcf()
p.gca().add_artist(my_circle)
# Create and place legend of the graph
plt.legend(labels=names, loc="center")
# Add graph to Kivy App
# plt.show()
# THE DESIRED RESULT IS TO ADD THE GRAPH TO THE APP WITH THE LINE OF CODE BELOW, INSTEAD OF THE plt.show() line
travel_manager.ids.expense_graph.add_widget(FigureCanvasKivyAgg(figure=plt.gcf()))
这篇关于将Matplotlib图添加到KivyMD中的小部件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
