【从实作学习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/[email protected]/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
                    }
                }
            }
        });