wxPython と ECharts ライブラリを使用して、HTML チャートを生成および保存します。wxPython は wxWidgets に基づく Python GUI ライブラリであり、ECharts はデータ視覚化のための JavaScript ライブラリです。
C:\pythoncode\blog\echartshow.py
参考URL：https://echarts.apache.org/v4/examples/zh/index.html
依存関係をインストールする
始める前に、必要な依存関係がインストールされていることを確認する必要があります。次のコマンドを使用して、wxPython および ECharts ライブラリをインストールできます。
pip install wxPython
アプリケーション作成ウィンドウ
まず、チャートの生成と保存のためのインターフェイスとして機能するアプリケーション ウィンドウを作成しましょう。
import wx
import wx.html2 as webview
class MainFrame(wx.Frame):
def __init__(self):
super().__init__(None, title="HTML Viewer", size=(800, 600))
self.panel = wx.Panel(self)
# 创建GUI组件
self.echart_memo = wx.TextCtrl(self.panel, style=wx.TE_MULTILINE)
self.button_generate = wx.Button(self.panel, label="生成")
self.button_save = wx.Button(self.panel, label="保存")
self.web = None
# 绑定事件处理函数
self.button_generate.Bind(wx.EVT_BUTTON, self.on_generate)
self.button_save.Bind(wx.EVT_BUTTON, self.on_save)
# 创建布局
sizer = wx.BoxSizer(wx.VERTICAL)
sizer.Add(self.echart_memo, proportion=1, flag=wx.EXPAND)
sizer.Add(self.button_generate, flag=wx.EXPAND)
sizer.Add(self.button_save, flag=wx.EXPAND)
self.panel.SetSizer(sizer)
上記のコードでは、wx.Frame を継承する MainFrame というクラスを作成しました。コンストラクターでは、ECharts オプションを入力するためのテキスト ボックス、チャートを生成および保存するためのボタンを作成し、それらを垂直レイアウトのパネルに追加します。
図の生成と保存
次に、グラフを生成して保存する機能を実装します。
def on_generate(self, event):
echart_options = self.echart_memo.GetValue()
if self.web is not None:
self.web.Destroy()
self.web = webview.WebView.New(self.panel, -1, parent=self.panel, style=wx.NO_BORDER)
sizer = self.panel.GetSizer()
sizer.Add(self.web, proportion=1, flag=wx.EXPAND)
self.panel.Layout()
# 构建完整的HTML文件
html = f'''
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script type="text/javascript">
var chartDom = document.getElementById('echart-container');
var myChart = echarts.init(chartDom);
var option = {
echart_options};
myChart.setOption(option);
</script>
</head>
<body>
<div id="echart-container" style="width: 100%; height: 400px;"></div>
</body>
</html>
'''
self.web.SetPage(html, "")
def on_save(self, event):
echart_options = self.echart_memo.GetValue()
# 构建完整的HTML文件
html = f'''
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
<script type="text/javascript">
var chartDom = document.getElementById('echart-container');
var myChart = echarts.init(chartDom);
var option = {
echart_options};
myChart.setOption(option);
</script>
</head>
<body>
<div id="echart-container" style="width: 100%; height: 400px;"></div>
</body>
</html>
'''
# 保存HTML文件
current_datetime = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
file_path = f"./html/{
current_datetime}.html"
with open(file_path, "w") as file:
file.write(html)
wx.MessageBox(f"保存成功！文件路径：{
file_path}", "保存成功", wx.OK | wx.ICON_INFORMATION)
上記のコードでは、on_generateとon_save2 つのメソッドを定義しました。on_generateこのメソッドは、ユーザーが「生成」ボタンをクリックすると呼び出され、テキスト ボックスから ECharts オプションを取得し、オプションに従ってチャートを含む HTML 文字列を動的に生成します。次に、wxWebView コンポーネントを使用して HTML 文字列をアプリケーション ウィンドウにロードし、結果のグラフを表示します。
on_saveこのメソッドは、ユーザーが「保存」ボタンをクリックしたときに呼び出され、on_generateメソッドと似ていますが、生成された HTML 文字列を HTML ファイルとして保存します。ファイル名には現在のタイムスタンプが使用され、各ファイルが一意の名前を持つことが保証されます。保存が成功したら、wx.MessageBox を使用してメッセージ ボックスを表示し、保存操作が成功したことをユーザーに通知し、保存されたファイルのパスを表示します。
アプリケーションを実行する
最後に、wx.App インスタンスを作成し、MainFrame クラスをインスタンス化し、アプリケーションのイベント ループを実行します。
if __name__ == "__main__":
app = wx.App()
frame = MainFrame()
frame.Show()
app.MainLoop()
上記のコード スニペットは、wx.App インスタンスを作成し、アプリケーションの GUI を初期化します。次に、メイン ウィンドウを表示し、app.MainLoop()メソッドを呼び出してアプリケーションのイベント ループを開始し、アプリケーションを実行し続けます。
完全なコード:
import wx
import wx.html2 as webview
import datetime
class MainFrame(wx.Frame):
def __init__(self):
super().__init__(None, title="HTML Viewer", size=(800, 600))
self.panel = wx.Panel(self)
self.echart_memo = wx.TextCtrl(self.panel, style=wx.TE_MULTILINE)
self.button_generate = wx.Button(self.panel, label="生成")
self.button_save = wx.Button(self.panel, label="保存")
self.web = webview.WebView.New(self.panel)
self.button_generate.Bind(wx.EVT_BUTTON, self.on_generate)
self.button_save.Bind(wx.EVT_BUTTON, self.on_save)
sizer = wx.BoxSizer(wx.VERTICAL)
sizer.Add(self.echart_memo, proportion=1, flag=wx.EXPAND)
sizer.Add(self.button_generate, flag=wx.EXPAND)
sizer.Add(self.button_save, flag=wx.EXPAND)
sizer.Add(self.web, proportion=1, flag=wx.EXPAND)
self.panel.SetSizer(sizer)
def on_generate(self, event):
echart_options = self.echart_memo.GetValue()
# 构建完整的HTML文件
html = f'''
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart-container" style="width: 100%; height: 400px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart-container'));
var {
echart_options}
chart.setOption(option);
</script>
</body>
</html>
'''
self.web.SetPage(html, "")
def on_save(self, event):
echart_options = self.echart_memo.GetValue()
# 构建完整的HTML文件
# html = f'''
html = f'''
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script>
</head>
<body>
<div id="chart-container" style="width: 100%; height: 400px;"></div>
<script>
var chart = echarts.init(document.getElementById('chart-container'));
var {
echart_options}
chart.setOption(option);
</script>
</body>
</html>
'''
# 保存HTML文件
current_datetime = datetime.datetime.now().strftime("%Y%m%d_%H%M%S")
file_path = f"../html/{
current_datetime}.html"
with open(file_path, "w") as file:
file.write(html)
wx.MessageBox(f"保存成功！文件路径：{
file_path}", "保存成功", wx.OK | wx.ICON_INFORMATION)
if __name__ == '__main__':
app = wx.App()
frame = MainFrame()
frame.Show()
app.MainLoop()
結論は
このブログでは、wxPython と ECharts ライブラリを使用して HTML チャートを生成および保存する方法を紹介します。wxPythonのGUIコンポーネントとEChartsのデータ可視化機能を組み合わせることで、チャート生成・保存ツールを簡単に作成できます。ユーザーは、ECharts オプションを入力し、生成ボタンをクリックするだけでアプリケーション ウィンドウにチャートをリアルタイムで表示し、後で使用するためにチャートを HTML ファイルとして保存できます。