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>
<!--<link href="../Content/bootstrap.min.css" rel="stylesheet" />-->
<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>
<!--從 Model 讀取 Business 資料-->
@*@{ 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>
\Views\Branch\getBusinessJsonData.cshtml
----------------------------------------------------------------------------------------------------------------------------------------
參考資料：
[1] Chart.js 官方網站
https://www.chartjs.org/samples/latest/
https://www.chartjs.org/docs/latest/
[2] ASP.NET Web API (msdn)
https://docs.microsoft.com/zh-tw/aspnet/web-api/
----------------------------------------------------------------------------------------------------------------------------------------
參考書籍：
[1] 網頁程式設計 ASP.NET MVC 5.x 範例完美演繹 (繁體書籍), Ch 5、Ch 6, 作者：奚江華
https://www.tenlong.com.tw/products/9789864769292?list_name=srh
[2] 跟著實務學習 ASP.NET MVC (繁體書籍), 作者：蔡文龍、蔡捷雲、歐志信、曾芷琳、萬鴻曜
https://www.tenlong.com.tw/products/9789864766918?list_name=srh
----------------------------------------------------------------------------------------------------------------------------------------
Chart.js 與 ASP.NET MVC 整合應用的更多相关文章
- 我的博客：C# PHP J2ee Java Android js WP Asp.net mvc Python
<p><A target="_blank" href="http://blog.163.com/hr_company_product/" &g ...
- 基于Bootstrap和Knockout.js的ASP.NET MVC开发实战
之前在一家公司里用过Knockout,是easyui 和 Knockout结合 的.下面的这本应该不错. 目录 前言 第一部分入门指南 第1章MVC介绍 创建第一个项目 分析HomeControlle ...
- 用JS解决Asp.net Mvc返回JsonResult中DateTime类型数据格式的问题
当用ajax异步时,返回JsonResult格式的时候,发现当字段是dateTime类型时,返回的json格式既然是“/Date(1435542121135)/” 这样子的,当然这不是我们想要的格式. ...
- asp.net mvc整合Nhibernate的配置方法
http://blog.csdn.net/xz2001/article/details/8452794 http://www.cnblogs.com/GoodHelper/archive/2011/0 ...
- 基于Bootstrap和Knockout.js的ASP.NET MVC开发实战 关于 拦截器的 学习 部分
先贴一段: 下面贴代码: 上面这段代码呢,有几个点迷糊.可以找找看
- ASP.NET MVC 單元測試系列
ASP.NET MVC 單元測試系列 (7):Visual Studio Unit Test 透過 Visual Studio 裡的整合開發環境 (IDE) 結合單元測試開發是再便利不過的了,在 Vi ...
- 基于TeamCity的asp.net mvc/core,Vue 持续集成与自动部署
一 Web Server(Windows)端的配置 1.配置IIS,重要的是管理服务 1.1 配置FTP(前端NPM项目需要) 该步骤略,如果是在阿里云ESC上,需要开启端口21(用来FTP认证握手) ...
- asp.net mvc中的后台验证
asp.net mvc的验证包含后台验证和前端验证.后台验证主要通过数据注解的形式实现对model中属性的验证,其验证过程发生在model绑定的过程中.前端验证是通过结合jquery.validate ...
- ASP.NET MVC异步验证是如何工作的02,异步验证表单元素的创建
在上一篇"ASP.NET MVC异步验证是如何工作的01,jQuery的验证方式.错误信息提示.validate方法的背后"中,了解了jQuery如何验证,如何显示错误信息,本篇要 ...
随机推荐
- 《前端之路》 之 前端 安全 XSS 原理以及防御手段
什么是 XSS 一.XSS 什么是 XSS XSS,即 Cross Site Script , 翻译过来就是 跨站脚本攻击:为了和 css 有所区分,因而在安全领域被称为 XSS. 什么是 XSS 攻 ...
- Vue.js组件间通信方式总结
平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子 ...
- uni-app实现顶部导航栏显示按钮+搜索框
最近公司准备做app,最终决定使用uni-app框架开发,但是当把设计图给我的时候我心里有点没底,因为他的设计图顶部长成这个样子: 因为这个功能在小程序是根本无法实现的,可能受这个影响,我感觉好像实现 ...
- c# 事件的订阅发布Demo
delegate void del(); class MyClass1 { public event del eventcount;//创建事件并发布 public void Count() { ; ...
- 设计模式系列1：单例模式（Singleton Pattern）
定义 保证一个类仅有一个实例,并提供一个该实例的全局访问点. --<设计模式GoF> UML类图 使用场景 当类只能有一个实例并且用户可以从一个众所周知的访问点访问它时. 创建一个对象需 ...
- HTML基础系列
HTML标记语言,网页制作的第一步. 什么是HTML呢?查百度 基础语法 常用标签 HTML是超文本标记语言,HTML不用编译,直接在浏览器中执行,HTML是一个文本文件. HTML基本结构,标签,元 ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- 携程实时计算平台架构与实践丨DataPipeline
文 | 潘国庆 携程大数据平台实时计算平台负责人 本文主要从携程大数据平台概况.架构设计及实现.在实现当中踩坑及填坑的过程.实时计算领域详细的应用场景,以及未来规划五个方面阐述携程实时计算平台架构与实 ...
- Linux新加磁盘挂载和重启自动挂载
提示两点:*新加的硬盘需要重启服务器fdisk -l才能看到*下面操作要用root账户大概是这样的,查看-分区-格式化-挂载-重启自动挂载1.加硬盘后重启服务器查看[root@test199 ~]# ...
- 关于Redis和Memcache的比较
关于Redis和Memcache在应用中,都可以实现缓存的功能,但是,具体使用情况需要根据具体业务场景,尤其是对缓存数据有特性要求时,需要选择对应的缓存机制. 共同点: 都是基于内存的数据库,可用作缓 ...