iT邦幫忙

2021 iThome 鐵人賽

DAY 29
0
Modern Web

從實作學習ASP.NET Core - 30天的購物網站系列 第 29

【從實作學習ASP.NET Core】Day29 | 補充 | 圖表 Chart.js

網站大致完成了,今天就來介紹 Chart.js 這個免費的資料視覺化套件


Chart.js

Chart.js 官方網站
Chart.js 是用於數據可視化的免費開源 JavaScript library,它支持8種圖表類型:條形圖,線條圖,面積圖,餅圖,氣泡圖,雷達圖,極坐標圖和散點圖。

CDN

在官網有提供各個版本的 Chart.js 的 CDN ,取最新的 3.5.1 版加入專案

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

加入圖表

在網頁上建立 <canvas> 來做為圖表的目標
並加入下面的 JavaScript 來項目標渲染,就可以完成一個基本的圖表了

<canvas id="mychart"></canvas>

var ctx = document.getElementById("mychart"),
        mychart = new Chart(ctx, {
            type: "doughnut", // 圖表類型
            data: {
                labels: ['Test1', 'Test2', 'Test3'], // 標題
                datasets: [{
                    label: "# myLabel", // 標籤
                    data: [20, 16, 32], // 資料
                    backgroundColor: [  // 顏色
                        "LightSkyBlue",
                        "LightPink",
                        "LightGray"
                    ],
                }]
            },
        });

使用資料庫資料來做圖表

以使用者性別比來做範例
後端撈出資料後,用 JsonSerializer.Serialize() 把資料轉為 Json 型式,
ViewBag 傳給前端頁面,這樣前端只要替換掉 data 的部分就完成了
( 怎麼撈出想要的資料可以參考資料庫的語法這邊就不多說 )

public IActionResult Dashboard()
{
    List<int> datalist = new List<int>();
    
    //依照需求撈資料
    var mydata = _userManager.Users.
        GroupBy(m => m.Gender).
        Select(x => new { label = x.Key, data = x.Count() }).ToList();

    //把資料存成List
    foreach(var item in mydata)
    {
        datalist.Add(item.data);
    }
    
    //序列化
    ViewBag.mydata = JsonSerializer.Serialize(datalist);

    return View();
}
var userdata = @Html.Raw(ViewBag.mydata);
var ctx = document.getElementById("example"),
        example = new Chart(ctx, {
            type: "doughnut", // 圖表類型
            data: {
                labels: [ "Male", "Female", "Unknown" ], // 標題
                datasets: [{
                    data: userdata,     // 資料
                    backgroundColor: [  // 背景色 (照順序輪用)
                        "LightSkyBlue",
                        "LightPink",
                        "LightGray"
                    ],
                }]
            },
            options: {
                maintainAspectRatio: false, // 固定長寬比
                responsive: true,
                plugins: {
                    legend: {
                        position: 'left',
                        boxWidth: 80
                    }
                }
            }
        });


其他還有很多不同的樣式可以選擇,在官網也有不同樣式的資料型態,有興趣的話可以自己看看,自由的組合圖表也可以完成一個儀表板的頁面哦!


上一篇
【從實作學習ASP.NET Core】Day28 | 前台 | 管理我的訂單
下一篇
【從實作學習ASP.NET Core】Day30 | 總結與回顧
系列文
從實作學習ASP.NET Core - 30天的購物網站30

尚未有邦友留言

立即登入留言