[WinForm] 如何使用 WebBrowser 顯示 Echarts 圖表

[WinForm] 如何使用 WebBrowser 顯示 Echarts 圖表

Echarts 是 Apache 支援的開源類別庫,可免費商用,是我非常愛用的網頁圖表。
Echarts 本身是由 JS 類別庫支援,需要在網頁上顯示,如果要用在 WinForm 顯示的話,就需要透過 WebBrowser 為載體呈現。

有網友詢問我該如何在 WinForm 顯示 Echarts 圖表,我測試了一下,做了簡單的範例分享給大家。

文末有範例下載,有需要可自行下載測試一下。

Apache Echarts 介紹

Apache Echarts 是一個基於 JavaScript 的開源可視化圖庫,提供非常豐富的圖表可使用,包含常見折線、直條、圓餅圖。
連結: https://echarts.apache.org/examples/zh/index.html#chart-type-line

Apache Echarts

還有金融業的 K 線圖可使用,我當初是因為有好用的 K 線圖又免費,而決定大量使用 Echarts 的。
連結: https://echarts.apache.org/examples/zh/index.html#chart-type-candlestick

Apache Echarts

其他分類的圖表很多,還有 3D 圖表可使用蠻酷的,有需要的朋友可以自行研究一下。

建立 Echarts 網頁圖表

這裡我先建立一個基本的 EchartPage.html 檔案,裡面引用 echarts.js 類別庫,再呈現基本的 Echarts 圖表。

執行後畫面。

Echarts 網頁圖表

在程式碼裡面,最特別的是這一行 <meta http-equiv="X-UA-Compatible" content="IE=edge">
其功能是強制瀏覽器呈現當前的最高版本。
這一行是為了在 WinForm 裡面正常顯示而加的。

因為在 WinForm 呈現的網頁,預設是以 IE7 解析原始碼,而 IE7 無法正常顯示 Echarts 的語法,所以需要調整。

如果沒有加此行,用 WinForm 呈現就會出現讀取 JavaScript 錯誤。

關於 IE 相容性設定,可參考這篇文章說明: https://shunnien.github.io/2017/09/20/ie-compatibility-set/

建立 WinForm 專案

打開 Visual Studio 2022,建立新 Windows Forms App (.NET Framework) 專案。

建立 WinForm 專案

在 Form1 表單,我只放一個全版的 WebBrowser 呈現。

WebBrowser

在 Form1_Load 程式碼只有一行,載入 EchartPage.html 的檔案。

我是載入跟執行位置同目錄的檔案,所以要把 EchartPage.html 放在 \bin\Debug 的目錄內。

放在 \bin\Debug 的目錄內

WebBrowser 載入網頁有不同做法,使用網址也行。

執行結果

執行程式後,就會出現 WinForm 畫面,呈現 Echarts 圖表。

執行程式後,就會出現 WinForm 畫面,呈現 Echarts 圖表

重點整理

  1. Echarts 是 Apache 支援的開源類別庫,可免費商用
  2. HTML 要特別指定使用 IE 版本
  3. WebBrowser 載入網頁,不須其他設定

範例下載

連結 GitHub 下載範例

相關學習文章

如果你在學習上有不懂的地方,需要諮詢服務,可以參考站長服務,我想辨法解決你的問題
如果文章內容有過時、不適用或錯誤的地方,幫我在下方留言通知我一下,謝謝

加入社團一起討論

關注我的 IG