Chart.js 與 ASP.NET MVC 整合應用
程序员文章站
2022-05-14 09:51:02
介紹 Chart.js 這套 open source 的免費「圖表」繪製函式庫，及其與 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 官方網站：
chart.js 使用方式：
visual studio 中的引用方式，用 nuget 安裝 chart.js，並在頁面中引用 chart.min.js。
----------------------------------------------------------------------------------------------------------------------------------------
以下的範例 1，以單純的 .html 來測試 chart.js (不使用 .net / c#)。資料來源，是寫死在頁面裡的 javascript。
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 <!--<link href="../content/bootstrap.min.css" rel="stylesheet" />-->
7 <script src="../scripts/chart.min.js"></script>
8 </head>
9 <body>
10 <canvas id="mychart"></canvas>
11
12 <script>
13 var ctx = document.getelementbyid("mychart");
14 var chart = new chart(ctx, {
15 type: "line",
16 data: {
17 labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
18 datasets: [{
19 label: "台北",
20 fill: false,
21 backgroundcolor: 'rgba(255,165,0,0.3)',
22 bordercolor: 'rgb(255,135,20)',
23 pointstyle: "circle",
24 pointbackgroundcolor: 'rgb(0,222,0)',
25 pointradius: 5,
26 pointhoverradius: 10,
27 data: [13.1, 10.2, 13.5, 20.9, 25.2, 27.1, 31.8]
28 }, {
29 label: "*",
30 fill: false,
31 backgroundcolor: 'rgba(0,255,255,0.3)',
32 bordercolor: 'rgb(0,225,255)',
33 pointstyle: "triangle",
34 pointbackgroundcolor: 'blue',
35 pointradius: 5,
36 pointhoverradius: 10,
37 data: [29.1, 28.3, 22.6, 25.4, 27.5, 23.4]
38
39 }, {
40 label: "越南",
41 fill: false,
42 backgroundcolor: 'rgba(153,50,204,0.3)',
43 bordercolor: 'rgb(123,55,190)',
44 pointstyle: "rect",
45 pointbackgroundcolor: 'rgb(220,20,60)',
46 pointradius: 5,
47 pointhoverradius: 10,
48 data: [16.6, 17.3, 19.2, 23.8, 12.0, 17.6]
49
50 }]
51 },
52 options: {
53 responsive: true,
54 title: {
55 display: true,
56 fontsize: 26,
57 text: '2019 年各分公司 1 - 6 月份營業額'
58 },
59 tooltips: {
60 mode: 'point',
61 intersect: true,
62 },
63 hover: {
64 mode: 'nearest',
65 intersect: true
66 },
67 scales: {
68 xaxes: [{
69 display: true,
70 scalelabel: {
71 display: true,
72 labelstring: '月份',
73 fontsize: 15
74 },
75 ticks: {
76 fontsize: 15
77 }
78 }],
79 yaxes: [{
80 display: true,
81 scalelabel: {
82 display: true,
83 labelstring: '百萬(美元)',
84 fontsize: 15
85 },
86 ticks: {
87 fontsize: 15
88 }
89 }]
90 },
91 animation: {
92 duration: 2000
93 }
94 }
95 });
96 </script>
97 </body>
98 </html>
以下的範例 2，使用 asp.net mvc 來測試 chart.js。
資料來源，取自 controller 層 (c# collection 轉成 json 格式)。亦可改成取自 webapi 或資料庫。
1 using system.web.mvc;
2 using chartjs.models;
3 using newtonsoft.json;
4 using newtonsoft.json.linq;
5
6 namespace chartjs.controllers
7 {
8 public class branchcontroller : controller
9 {
10 // get: branch
11 public actionresult index()
12 {
13 return view();
14 }
15
16 public actionresult getbusinessjsondata()
17 {
18 string[] arrmonth = { "1月", "2月", "3月", "4月", "5月", "6月" };
19
20 //c# convert json string
21 string jsonmonth = newtonsoft.json.jsonconvert.serializeobject(arrmonth);
22 viewbag.jsonmonth = jsonmonth;
23
24 list<branch> branchs = new list<branch>
25 {
26 new branch
27 {
28 city="台北",
29 business = new double[] { 13.1, 10.2, 13.5, 20.9, 25.2, 27.1, 31.8 }
30 },
31 new branch{
32 city="*",
33 business = new double[] { 29.1, 28.3, 22.6, 25.4, 27.5, 23.4 }
34
35 },
36 new branch{
37 city="越南",
38 business = new double[] { 16.6, 17.3, 19.2, 23.8, 12.0, 17.6 }
39 }
40 };
41
42 //c# convert json string
43 string jsonbusiness = newtonsoft.json.jsonconvert.serializeobject(branchs);
44 viewbag.jsonbusiness = jsonbusiness;
45
46 //回傳 json 格式，讓各種 client 裝置，以 ajax 方式呼叫的 api
47 //return json(branchs, jsonrequestbehavior.allowget);
48
49 return view(branchs);
50 }
51 }
52 }
1 @model ienumerable<chartjs.models.branch>
2
3 @{
4 viewbag.title = "chart.js 範例";
5 }
6 @*<h2>index</h2>*@
7
8 <script src="../scripts/chart.min.js"></script>
9
10 <canvas id="mychart"></canvas>
11
12 <table>
13 <!--從 model 讀取 business 資料-->
14 @*@{ var js = new system.web.script.serialization.javascriptserializer(); }
15
16 @foreach (var m in model)
17 {
18 <tr>
19 <td>@html.displayfor(x => m.city)</td>
20 <td>@js.serialize(m.business)</td>
21 </tr>
22 }*@
23 </table>
24
25 <script>
26 //將 json 資料，指派給 javascript array
27 //月份 (1月~6月)
28 var jsmonth = @html.raw(viewbag.jsonmonth);
29
30 //三個城市的 city、business
31 var jsbusiness = @html.raw(viewbag.jsonbusiness);
32
33 var ctx = document.getelementbyid("mychart");
34 var chart = new chart(ctx, {
35 type: "line",
36 data: {
37 //labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
38 labels: jsmonth,
39 datasets: [{
40 //label: "台北",
41 label: jsbusiness[0].city,
42 fill: false,
43 backgroundcolor: 'rgba(255,165,0,0.3)',
44 bordercolor: 'rgb(255,135,20)',
45 pointstyle: "circle",
46 pointbackgroundcolor: 'rgb(0,222,0)',
47 pointradius: 5,
48 pointhoverradius: 10,
49 data: jsbusiness[0].business
50 //data: [13.1, 10.2, 13.5, 20.9, 25.2, 27.1, 31.8]
51 }, {
52 //label: "*",
53 label: jsbusiness[1].city,
54 fill: false,
55 backgroundcolor: 'rgba(0,255,255,0.3)',
56 bordercolor: 'rgb(0,225,255)',
57 pointstyle: "triangle",
58 pointbackgroundcolor: 'blue',
59 pointradius: 5,
60 pointhoverradius: 10,
61 data: jsbusiness[1].business
62 //data: [29.1, 28.3, 22.6, 25.4, 27.5, 23.4]
63 }, {
64 //label: "越南",
65 label: jsbusiness[2].city,
66 fill: false,
67 backgroundcolor: 'rgba(153,50,204,0.3)',
68 bordercolor: 'rgb(123,55,190)',
69 pointstyle: "rect",
70 pointbackgroundcolor: 'rgb(220,20,60)',
71 pointradius: 5,
72 pointhoverradius: 10,
73 data: jsbusiness[2].business
74 //data: [16.6, 17.3, 19.2, 23.8, 12.0, 17.6]
75 }]
76 },
77 options: {
78 responsive: true,
79 title: {
80 display: true,
81 fontsize: 26,
82 text: '2019 年各分公司 1 - 6 月份營業額'
83 },
84 tooltips: {
85 mode: 'point',
86 intersect: true,
87 },
88 hover: {
89 mode: 'nearest',
90 intersect: true
91 },
92 scales: {
93 xaxes: [{
94 display: true,
95 scalelabel: {
96 display: true,
97 labelstring: '月份',
98 fontsize: 15
99 },
100 ticks: {
101 fontsize: 15
102 }
103 }],
104 yaxes: [{
105 display: true,
106 scalelabel: {
107 display: true,
108 labelstring: '百萬(美元)',
109 fontsize: 15
110 },
111 ticks: {
112 fontsize: 15
113 }
114 }]
115 },
116 animation: {
117 duration: 2000
118 }
119 }
120 });
121 </script>
----------------------------------------------------------------------------------------------------------------------------------------
參考資料：
[1] chart.js 官方網站
[2] asp.net web api (msdn)
----------------------------------------------------------------------------------------------------------------------------------------
參考書籍：
[1] 網頁程式設計 asp.net mvc 5.x 範例完美演繹 (繁體書籍), ch 5、ch 6, 作者：奚江華
[2] 跟著實務學習 asp.net mvc (繁體書籍), 作者：蔡文龍、蔡捷雲、歐志信、曾芷琳、萬鴻曜
----------------------------------------------------------------------------------------------------------------------------------------
上一篇： Linux下SSH远程连接断开后让程序继续运行解决办法
下一篇： 微信端地图相关技术