Chart.js 與 ASP.NET MVC 整合應用

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

Chart.js 是一套開放原始碼的「圖表」繪製函式庫，和其他第三方的圖表工具相比，Chart.js 的特色如下：

支援 HTML 5、響應式網頁 (RWD, Responsive Web Design)
可免費使用，且可作為商業用途
開放原始碼 (GitHub)
可用 JavaScript 操作及開發
可與 JSON 格式整合，因此能與 ASP.NET MVC、ASP.NET WebAPI、AJAX 技術作整合，便於資料傳遞

圖 1本文範例的執行畫面 (.html、.cshtml)

-------------------------------------------------
本文的 ASP.NET MVC 範例下載：
https://files.cnblogs.com/files/WizardWu/190101.zip
---------------------------------------------------

Chart.js 官方網站：
https://www.chartjs.org/

Chart.js 使用方式：
Visual Studio 中的引用方式，用 NuGet 安裝 Chart.js，並在頁面中引用 Chart.min.js。

----------------------------------------------------------------------------------------------------------------------------------------

以下的範例 1，以單純的 .html 來測試 Chart.js (不使用 .NET / C#)。資料來源，是寫死在頁面裡的 JavaScript。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>

<script src="../Scripts/Chart.min.js"></script>
</head>
<body>
<canvas id="myChart"></canvas> <script>
var ctx = document.getElementById("myChart");
var chart = new Chart(ctx, {
type: "line",
data: {
labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
datasets: [{
label: "台北",
fill: false,
backgroundColor: 'rgba(255,165,0,0.3)',
borderColor: 'rgb(255,135,20)',
pointStyle: "circle",
pointBackgroundColor: 'rgb(0,222,0)',
pointRadius: 5,
pointHoverRadius: 10,
data: [13.1, 10.2, 13.5, 20.9, 25.2, 27.1, 31.8]
}, {
label: "高雄",
fill: false,
backgroundColor: 'rgba(0,255,255,0.3)',
borderColor: 'rgb(0,225,255)',
pointStyle: "triangle",
pointBackgroundColor: 'blue',
pointRadius: 5,
pointHoverRadius: 10,
data: [29.1, 28.3, 22.6, 25.4, 27.5, 23.4] }, {
label: "越南",
fill: false,
backgroundColor: 'rgba(153,50,204,0.3)',
borderColor: 'rgb(123,55,190)',
pointStyle: "rect",
pointBackgroundColor: 'rgb(220,20,60)',
pointRadius: 5,
pointHoverRadius: 10,
data: [16.6, 17.3, 19.2, 23.8, 12.0, 17.6] }]
},
options: {
responsive: true,
title: {
display: true,
fontSize: 26,
text: '2019 年各分公司 1 - 6 月份營業額'
},
tooltips: {
mode: 'point',
intersect: true,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: '月份',
fontSize: 15
},
ticks: {
fontSize: 15
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: '百萬(美元)',
fontSize: 15
},
ticks: {
fontSize: 15
}
}]
},
animation: {
duration: 2000
}
}
});
</script>
</body>
</html>

\htmlPages\LineChart.html

以下的範例 2，使用 ASP.NET MVC 來測試 Chart.js。

資料來源，取自 Controller 層 (C# Collection 轉成 JSON 格式)。亦可改成取自 WebAPI 或資料庫。

using System.Web.Mvc;
using ChartJS.Models;
using Newtonsoft.Json;
using Newtonsoft.Json.Linq; namespace ChartJS.Controllers
{
public class BranchController : Controller
{
// GET: Branch
public ActionResult Index()
{
return View();
} public ActionResult getBusinessJsonData()
{
string[] arrMonth = { "1月", "2月", "3月", "4月", "5月", "6月" }; //C# convert JSON string
string jsonMonth = Newtonsoft.Json.JsonConvert.SerializeObject(arrMonth);
ViewBag.JsonMonth = jsonMonth; List<Branch> branchs = new List<Branch>
{
new Branch
{
City="台北",
Business = new double[] { 13.1, 10.2, 13.5, 20.9, 25.2, 27.1, 31.8 }
},
new Branch{
City="高雄",
Business = new double[] { 29.1, 28.3, 22.6, 25.4, 27.5, 23.4 } },
new Branch{
City="越南",
Business = new double[] { 16.6, 17.3, 19.2, 23.8, 12.0, 17.6 }
}
}; //C# convert JSON string
string jsonBusiness = Newtonsoft.Json.JsonConvert.SerializeObject(branchs);
ViewBag.JsonBusiness = jsonBusiness; //回傳 JSON 格式，讓各種 client 裝置，以 AJAX 方式呼叫的 API
//return Json(branchs, JsonRequestBehavior.AllowGet); return View(branchs);
}
}
}

\Controllers\BranchController.cs

@model IEnumerable<ChartJS.Models.Branch> @{
ViewBag.Title = "Chart.js 範例";
}
@*<h2>Index</h2>*@ <script src="../Scripts/Chart.min.js"></script> <canvas id="myChart"></canvas> <table>

@*@{ var js = new System.Web.Script.Serialization.JavaScriptSerializer(); } @foreach (var m in Model)
{
<tr>
<td>@Html.DisplayFor(x => m.City)</td>
<td>@js.Serialize(m.Business)</td>
</tr>
}*@
</table> <script>
//將 JSON 資料，指派給 JavaScript array
//月份 (1月~6月)
var jsMonth = @Html.Raw(ViewBag.JsonMonth); //三個城市的 City、Business
var jsBusiness = @Html.Raw(ViewBag.JsonBusiness); var ctx = document.getElementById("myChart");
var chart = new Chart(ctx, {
type: "line",
data: {
//labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
labels: jsMonth,
datasets: [{
//label: "台北",
label: jsBusiness[0].City,
fill: false,
backgroundColor: 'rgba(255,165,0,0.3)',
borderColor: 'rgb(255,135,20)',
pointStyle: "circle",
pointBackgroundColor: 'rgb(0,222,0)',
pointRadius: 5,
pointHoverRadius: 10,
data: jsBusiness[0].Business
//data: [13.1, 10.2, 13.5, 20.9, 25.2, 27.1, 31.8]
}, {
//label: "高雄",
label: jsBusiness[1].City,
fill: false,
backgroundColor: 'rgba(0,255,255,0.3)',
borderColor: 'rgb(0,225,255)',
pointStyle: "triangle",
pointBackgroundColor: 'blue',
pointRadius: 5,
pointHoverRadius: 10,
data: jsBusiness[1].Business
//data: [29.1, 28.3, 22.6, 25.4, 27.5, 23.4]
}, {
//label: "越南",
label: jsBusiness[2].City,
fill: false,
backgroundColor: 'rgba(153,50,204,0.3)',
borderColor: 'rgb(123,55,190)',
pointStyle: "rect",
pointBackgroundColor: 'rgb(220,20,60)',
pointRadius: 5,
pointHoverRadius: 10,
data: jsBusiness[2].Business
//data: [16.6, 17.3, 19.2, 23.8, 12.0, 17.6]
}]
},
options: {
responsive: true,
title: {
display: true,
fontSize: 26,
text: '2019 年各分公司 1 - 6 月份營業額'
},
tooltips: {
mode: 'point',
intersect: true,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: '月份',
fontSize: 15
},
ticks: {
fontSize: 15
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: '百萬(美元)',
fontSize: 15
},
ticks: {
fontSize: 15
}
}]
},
animation: {
duration: 2000
}
}
});
</script>