jqChart是以HTML5 Canvas實現的互動式圖表, 提供客戶端高效能, 跨瀏覽器, 並支援可觸控裝置, 但缺點是右下角有版權字眼www.jqchart.com
ASP.NET MVC主要元件包括Model, View, Controller, Routing;
Model負責資料庫存取;
View 負責使用者畫面的呈現;
Controller負責接收使用者輸入的資料, 透過Model進行驗證及處理後, 將結果送給View;
Routing負責串起Controller與View以進行流程控管
jqChart是以HTML5 Canvas實現的互動式圖表, 提供客戶端高效能, 跨瀏覽器, 並支援可觸控裝置, 但缺點是右下角有版權字眼www.jqchart.com
STP1. 建立一個ASPX MVC4的專案, VS2012>File>New>Project>ASP.NETMVC4WebApplication>MobileApplication>ASPX
STP2. 下載jqChart for ASP.NET MVC, 我使用的版本是jqChartASPNET_MVC_3_6_2_0.zip, 並把下列檔案複製至對應的專案目錄下
| MvcjqChart | jqChartASPNET_MVC_3_6_2_0 | PURPOSE |
| \bin | \bin\Mvc4\JQChart.Web.Mvc.dll | |
| \Content | \css\jquery.jqChart.css | |
| \css\jquery.jqRangeSlider.css | ||
| \Scripts | \js\jquery.jqChart.min.js | jqChart程式碼本身 |
| \js\jquery-1.5.1.min.js | jQuery library | |
| \js\jquery.jqRangeSlider.min.js | 支援chart zooming | |
| \js\excanvas.js | 提供不支援canvas的IE使用 |
STP3. ~/Models/ChartData.cs, 建立一個Model儲存圖表資料
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcjqChart.Models
{
public class ChartData
{
public string Label { get; set; }
public double Value1 { get; set; }
public double Value2 { get; set; }
public static List GetData()
{
var data = new List();
data.Add(new ChartData("ADFU1", 20));
data.Add(new ChartData("MBPW2", 19));
data.Add(new ChartData("ABCDE", 17));
data.Add(new ChartData("EBLFU1", 16));
data.Add(new ChartData("LCVD3", 15));
data.Add(new ChartData("ADDK1", 11));
data.Add(new ChartData("CMFU3", 8));
data.Add(new ChartData("LCCR2", 7));
data.Add(new ChartData("QBLE1", 5));
data.Add(new ChartData("SPNS1", 2));
return data;
}
public ChartData(string label, double value1)
{
this.Label = label;
this.Value1 = value1;
}
public ChartData(string label, double value1, double value2)
{
this.Label = label;
this.Value1 = value1;
this.Value2 = value2;
}
}
}
STP4. ~/Controllers/ChartController.cs, 建立一個Controller回傳圖表資料給View, 並加入一個Action ColumnChart
注意: Controller必須引用剛剛建立的Model
using ApplicationName.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcjqChart.Models;
namespace MvcjqChart.Controllers
{
public class ChartController : Controller
{
//
// GET: /Chart/
public ActionResult Index()
{
return View();
}
public ActionResult ColumnChart()
{
return View(ChartData.GetData());
}
}
}
STP5. ~/Views/ColumnChart.aspx, 在剛剛建立的ColumnChart建立一個View, 在ChartController.ColumnChart()右鍵, add View
注意: View必須引用剛剛建立的Model
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<ApplicationName.Models.ChartData>>" %>
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<MvcjqChart.Models.ChartData>>" %>
<%@ Import Namespace="JQChart.Web.Mvc" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>jqChart</title>
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqChart.css" />
<link rel="stylesheet" type="text/css" href="~/Content/jquery.jqRangeSlider.css" />
<link rel="stylesheet" type="text/css" href="~/Content/themes/smoothness/jquery-ui-1.8.21.css" />
<script src="<%: Url.Content("~/Scripts/jquery-1.5.1.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.jqChart.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.jqRangeSlider.min.js") %>" type="text/javascript"></script>
<!--[if IE]><script lang="javascript" type="text/javascript" src="<%: Url.Content("~/Scripts/excanvas.js") %>"></script><![endif]-->
</head>
<body>
<div>
<%= Html.JQChart()
.Chart(Model)
.ID("jqChart")
.Title(title => title.Text("PQC Top 10 ErrCode")) //設定標頭文字
.Legend(legend => legend.Title(title => title.Text("")) //設定說明文字
.Border(border => border.LineWidth(0)) //設定說明框線
.Location(LegendLocation.Bottom)) //設定說明位置
.Animation(TimeSpan.FromSeconds(1)) //設定動畫
.Series(series =>{
series.Column().Title("Qty")
.FillStyle("red")
.XValues(el => el.Label)
.YValues(el => el.Value1);
})
.Render()%>
</div>
</body>
</html>
STP6. ~/App_Start/RouteConfig.cs, 修改Default Path, controller="Chart", action="ColumnChart"
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace MvcjqChart
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Chart", action = "ColumnChart", id = UrlParameter.Optional }
);
}
}
}
結果如下
