使用 ECharts 建立股票 K 線圖

[ASP.NET MVC] 使用 ECharts 建立股票 K 線圖 (附範例下載)

今天展示一下如何在 ASP.NET MVC 上顯示 ECharts 的 K 線圖套件,這個 K 線圖在 ECharts 上稱為 Candlestick (蠟燭圖),主要的用途就在展示股價的開盤、最高、最低、收盤價及成交量的訊號。

Echarts 是 Apache 支援的開源類別庫,可免費商用,也可以對 Apache 捐贈貢獻。

文末會提供這次教學的成果下載,有需要可自行下載瀏覽喔。

在官方上可以看到各種的樣式ECharts

連結網址: https://echarts.apache.org/examples/zh/index.html#chart-type-candlestick

我今天展示的是基本的樣式,上方圖示為開盤、最高、最低、收盤,下方圖示為成交量的 Bar 圖,後端資料簡單用 JSON 模擬一組真實的 K線價格。

這是由 ASP.NET MVC 預設的頁面改寫而來,最後會附上完整的程式碼可供下載參考。

建立 MVC 專案

打開 Visual Studio 2019,選擇「ASP.NET Web 應用程式 (.NET Framework),按「下一步」,建立新 MVC 專案。

開啟 Visual Studio 2019 選擇「建立新的專案」,專案類型為「ASP.NET Web 應用程式(.NET Framework)」

修改佈局頁

MVC 建立之後,開啟 \Views\Shared\_Layout.cshtml 先調整一下佈局頁,引用新的 JavaScript 。

在原有引用語法 @Scripts.Render("~/bundles/bootstrap") 下方,加入 Vue.js 套件。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

加入 EChart 套件

<script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>

調整後畫面

修改佈局頁

調整首頁

此範例我直接改在首頁顯示,開啟 \Views\Home\Index.cshtml 頁面。

開啟 \Views\Home\Index.cshtml 頁面

先清空原有的範本程式碼,然後貼上以下新的語法。

HTML 語法

JavaScript 語法

我使用 Vue.Js 為前端框架,先呼叫 drawKlineChart 建立起 ECharts 的圖層後,就可以再呼叫 GetKLineData 向後端取得K線資料,取得資料後再綁定在圖表上。

後端 Controller 語法

開啟 \Controllers\HomeController.cs 檔案,在方法內新增以下語法。

後端部份 K 線資料就由 JSON 來模擬實際取得的來源,實務上的做法可以從資料庫取得資料,再轉成 JSON 陣列格式,再回傳至前端。

每個 JSON 陣列資料包含日期、開盤、最高、最低、收盤、成交量資料。

前端的 GetKLineData 方法可以取得後端的資料,再經由 splitData() 方法拆解資料內容後放至 ECharts 裡面。

測試專案

完成以上語法,可以按 <F5> 執行一下專案,在首頁就可以看到以下的結果。

使用 ECharts 建立股票 K 線圖

重點整理

  1. ECharts 提供非常多免費的圖表套件
  2. 使用 Candlestick 繪製股票 K 線圖
  3. 需要先準備好 K 線資料
  4. 套用官方範例語法

範例下載

GitHub 連結

相關學習文章

如果你在學習上有不懂的地方,可以參考線上家教服務

如果你喜歡這篇文章,請幫我在上方綠色的拍手圖示按 5 下
使用 Google 或 FB 免費登入,你的鼓勵支持我繼續創作,寫出好的文章

[加入社團一起討論] 或是 [追蹤 Instagram]

8 thoughts on “[ASP.NET MVC] 使用 ECharts 建立股票 K 線圖 (附範例下載)

  1. M大有試過讓ECHART在winform上執行嗎
    我一直試不成功
    看M大有沒有空發篇文章來探討這個

        1. 我看起來只需要在網頁上能正確顯示 Echarts,再來就是從 WebBrowser 顯示網頁內容就行了,WebBrowser 只是網址載體而已

          1. 其實M大只要用webbrowser載入EChart官網DEMO就明白我說的了
            我想winform還是老實用ms chart control好了

          2. 我自己試了一下,一開始會出錯,引用 JS 就會出錯,
            但後來發現是 WebBrowser 預設版本是 IE7,會無法正常顯示 Echarts
            我在 HTML 裡面增加 < meta http-equiv="X-UA-Compatible" content="IE=11" >
            就正常顯示了,分享給你

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *