1. 全栈程序员必看首页

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

全栈程序员-用户IM • • 未分类

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」原文：http://www.tuicool.com/articles/maQrYnDemo_Chart_WebGridTwo Part:(1) design a table for test, create a view or procedure and input some records for test.(2) use the view or procedur

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺



原文：http://www.tuicool.com/articles/maQrYn

Demo_Chart_WebGrid

Two Part:

(1) design a table for test, create a view or procedure and input some records for test.

(2) use the view or procedure of the database, design a image by the class of chart and display all the data by the help of WebGrid.

Note: the Part(1) designed is to test and you can use the same method in the database of  you computer or server.

In this demo use the view of database.

Part(1) Database

1.Oracle SQL Developer

1.1 USE THE URSR SCOTT,CREATE TABLE METRICS and input some data (ID IS PK), you can copy them from the PR_SUM.XLS

ID STR_YEAR_MONTH NCDR baseline cumulative target cumulativetarget
1 2014/1/1 78 72 78 99 99
2 2014/2/1 65 89 143 99 198
3 2014/3/1 79 79 222 99 296
4 2014/4/1 80 84 302 99 395
5 2014/5/1 68 98 370 99 494
6 2014/6/1 48 93 418 99 593
7 2014/7/1 80 80 498 99 691
8 2014/8/1 69 99 790
9 2014/9/1 100 99 889
10 2014/10/1 124 99 988
11 2014/11/1 88 99 1086
12 2014/12/1 74 99 1185

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

1.2 Open the METRICS input the data and ensure it.

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

1.3 Use the ROLE OF SYSDBA  TO CREATE VIEW and    Scheme （方案）： SCOTT ,  VIEW_SUM

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

2.MVC+ORACLE+ODAC(use the view of database )

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

in the HomeController.cs  In the HomeController, the Action Index

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」 

 1 using MvcMetrics.DAL;  2  3 using System.Web.Helpers;  4  5  6  7 //database Context  8  9 private MetricsEntities db = new MetricsEntities(); 10 11 12 13 14 15 16 17 public ActionResult Index() 18 19  { 20 21 //ViewBag.Message = "Welcome to ASP.NET MVC!"; 22 23 //use VIEW from database 24 25 var records = db.VIEW_SUM.ToList(); 26 27 28 29 var grid = new WebGrid( 30 31  source: records, 32 33 fieldNamePrefix: "grid_", 34 35 defaultSort: "RELEASEDATE",// the way of sort 36 37 canPage: true, 38 39 canSort: true, 40 41 ajaxUpdateContainerId: "DivGrid", // ajaxUpadate bind 42 43 pageFieldName: "paging", 44 45 sortDirectionFieldName: "RELEASEDATE", 46 47 rowsPerPage: 4 //per page the count of records 48 49  ); 50 51 return View(grid); 52 53 54 55 }

View Code

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

In the view of Index,you can see that 

@{
  ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
  To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

Change it.

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」 

 1 @model WebGrid  2  3  4  5 @{  6  7 ViewBag.Title = "Test";  8  9 } 10 11 12 13 <div id="DivGrid"> 14 15 @Model.GetHtml( 16 17  columns: @Model.Columns( 18 19 @Model.Column("ID", "NO"), 20 21 @Model.Column("STR_YEAR_MONTH", format: @<i>@item.STR_YEAR_MONTH</i>, canSort: false), 22 23 @Model.Column("NCDR", "NCDR", format: @<b><i>@item.NCDR</i></b>, canSort: false), 24 25 @Model.Column("baseline", format: @<i>@item.baseline</i>, canSort: false), 26 27 @Model.Column("cumulative",format: @<i>@item.cumulative</i>, canSort: false), 28 29 @Model.Column("target", format: @<i>@item.target</i>, canSort: false), 30 31 @Model.Column("cumulativetarget", format: @<i>@item.cumulativetarget</i>, canSort: false)), 32 33 tableStyle: "grid", headerStyle: "headerStyle1", 34 35 selectedRowStyle: "selectedRowStyle", 36 37 caption: "List METRICS_DATA Table", 38 39 displayHeader: !IsPost, 40 41 fillEmptyRows: !IsPost, 42 43 emptyRowCellValue: "", 44 45  mode: WebGridPagerModes.All, 46 47 firstText: "First", 48 49 previousText: "Previous", nextText: "Next", 50 51 lastText: "Last" 52 53 54 55 ) 56 57 </div> 58 59 <h3> 60 61  Page Count: 62 63  @Html.Encode(@Model.PageCount) 64 65 <br/> 66 67  Total Record: 68 69  @Html.Encode(@Model.TotalRowCount) 70 71 </h3>

View Code

Note: @model WebGrid,   Declare variables the you will use.

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

In the Models ,add a class of member

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」 

1 public string Date { get; set; } 2 3 public double Value { get; set; }

View Code

In the HomeController, add this Action

Firstly, add reference System.Web.DataVisualization

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

using MvcMetrics.Models;
using System.Web.UI.DataVisualization.Charting;
using System.IO;
public FileResult GetChart()
{
  //NCDR,baseline,cumulative,target,cumulativetarge
  //We use target make the  scale of X and Y
  //use VIEW of database,get the all records
  var records = db.VIEW_SUM.ToList();
  
  List<double> dataNCDR = new List<double>();//NCDR
  List<double> databaseline = new List<double>();//baseline
  List<double> datacumulative = new List<double>();//cumulative
  List<Member> datatarget = new List<Member>();//target, X and Y
  List<double> datacumulativetarget = new List<double>();//cumulativetarget
  //spefical null,get the data for NCD,baseline,cumulative,target,cumulativetarge
  foreach (var record in records)
  {
      //note : the start is not null,so can deal with it in this way
      if (record.NCDR != null)
          dataNCDR.Add((double)record.NCDR);
      databaseline.Add((double)record.BASELINE);
      if (record.CUMULATIVE != null)
          datacumulative.Add((double)record.CUMULATIVE);
      //Member.Data is the X scale, Member.Value is the Y scale,the important is X scale
      Member temp = new Member() { Date = record.STR_YEAR_MONTH, Value = (double)record.TARGET };
      datatarget.Add(temp);
      datacumulativetarget.Add((double)record.CUMULATIVETARGET);
  }
  System.Web.UI.DataVisualization.Charting.Chart Chart1 = new System.Web.UI.DataVisualization.Charting.Chart();
  //the Height and Width of Chart1
  Chart1.Width = 800;//412
  Chart1.Height = 480;//296
  Chart1.RenderType = System.Web.UI.DataVisualization.Charting.RenderType.ImageTag;
  Chart1.Palette = ChartColorPalette.BrightPastel;
  Title t = new Title("NCDR Test MVC", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold),System.Drawing.Color.FromArgb(26, 59, 105));
  Chart1.Titles.Add(t);//add Title of Chart1
  //create a area of Chart1,use "Series 1" or others.
  Chart1.ChartAreas.Add("Series 1");
  //set Coordinate axis intervals Of X = 1
  Chart1.ChartAreas[0].AxisX.Interval = 1;   
  Chart1.ChartAreas[0].AxisX.IntervalOffset = 1;  
  //the scale of X display in one line or two line when it >= 9
  Chart1.ChartAreas[0].AxisX.LabelStyle.IsStaggered = false;   
  //change the x display Angle
  Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 45;
  //add Series, five .   the "Series 6" is used to make other effect
  Chart1.Series.Add("Series 1");
  Chart1.Series.Add("Series 2");
  Chart1.Series.Add("Series 3");
  Chart1.Series.Add("Series 4");
  Chart1.Series.Add("Series 5");
  Chart1.Series.Add("Series 6");//make other effect
  //test，in one Chart, Column 1 and Line 4
  Chart1.Series["Series 1"].ChartType = SeriesChartType.Column;//StackedColumn  Column
  Chart1.Series["Series 2"].ChartType = SeriesChartType.Line;
  Chart1.Series["Series 3"].ChartType = SeriesChartType.Line;
  Chart1.Series["Series 4"].ChartType = SeriesChartType.Line;
  Chart1.Series["Series 5"].ChartType = SeriesChartType.Line;
  ////make other effect
  Chart1.Series["Series 6"].ChartType = SeriesChartType.Point;
  // display the value of the Point
  Chart1.Series["Series 3"].IsValueShownAsLabel = true;
  Chart1.Series["Series 5"].IsValueShownAsLabel = true;
  //DataBindXY()  ,X scale,Y scale,use datatarget,"Series 4"
  Chart1.Series["Series 4"].Points.DataBindXY(datatarget, "date", datatarget, "value");
  //make Chart
  foreach (double value in dataNCDR)
  {
      Chart1.Series["Series 1"].Points.AddY(value);
  }
  foreach (double value in databaseline)
  {
      Chart1.Series["Series 2"].Points.AddY(value);
  }
  foreach (double value in datacumulative)
  {
      //double effects use the "Series 3" and "Series 6"
      Chart1.Series["Series 3"].Points.AddY(value);
      Chart1.Series["Series 6"].Points.AddY(value);
  }
  foreach (double value in datacumulativetarget)
  {
      Chart1.Series["Series 5"].Points.AddY(value);
  }
  //NCDR,baseline,cumulative,target,cumulativetarge
  Chart1.Series["Series 1"].Name = "NCDR";
  Chart1.Series["Series 2"].Name = "baseline";
  Chart1.Series["Series 3"].Name = "cumulative";
  Chart1.Series["Series 4"].Name = "target";
  Chart1.Series["Series 5"].Name = "cumulativetarge";
  //the "Series 6" do not displey in the Legend
  Chart1.Series["Series 6"].IsVisibleInLegend = false;
  //X Title
  Chart1.ChartAreas[0].AxisX.Title = "Date";
  Chart1.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Anonymous Pro", 10, System.Drawing.FontStyle.Regular);
  //Y Title
  Chart1.ChartAreas[0].AxisY.Title = "Value";
  Chart1.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Anonymous Pro", 10, System.Drawing.FontStyle.Regular);
  //x Major Line
  Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
  Chart1.ChartAreas[0].BorderDashStyle = ChartDashStyle.Solid;   //设置chartareas区域的边框样式
  
  //Border    the style of Border
  Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
  Chart1.BorderlineWidth = 2;
  Chart1.BorderColor = System.Drawing.Color.Black;
  Chart1.BorderlineDashStyle = ChartDashStyle.Solid;
  Chart1.BorderWidth = 2;
  //the location of Legend
  Legend legend1 = new Legend();
  legend1.Docking = Docking.Top;
  legend1.Alignment = System.Drawing.StringAlignment.Center;
  Chart1.Legends.Add(legend1);
  //IO
  MemoryStream imageStream = new MemoryStream();
  Chart1.SaveImage(imageStream, ChartImageFormat.Png);
  imageStream.Position = 0;
  return new FileStreamResult(imageStream, "image/png");
}

in index.cshtml，add 

<div>
<img src="/Home/GetChart" alt="Chart" />
</div>

Run,Result:

MVC-Chart_WebGrid 显示漂亮chart「建议收藏」

Code Details

HomeController.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcMetrics.DAL;
using System.Web.Helpers;
using MvcMetrics.Models;
using System.Web.UI.DataVisualization.Charting;
using System.IO;
namespace MvcMetrics.Controllers
{
public class HomeController : Controller
{  
//Database context,
private MetricsEntities db = new MetricsEntities();
public ActionResult Index()
{
  //ViewBag.Message = "Welcome to ASP.NET MVC!";
  //use VIEW of database,get the all records
  var records = db.VIEW_SUM.ToList();
  var grid = new WebGrid(
            source: records,
            fieldNamePrefix: "grid_",
            defaultSort: "RELEASEDATE",// the way of sort
            canPage: true,
            canSort: true,
            ajaxUpdateContainerId: "DivGrid", // ajaxUpadate bind
            pageFieldName: "paging",
            sortDirectionFieldName: "RELEASEDATE",
             rowsPerPage: 4 //per page the count of records
              );
  return View(grid);
}
public FileResult GetChart()
{
  //NCDR,baseline,cumulative,target,cumulativetarge
  //We use target make the  scale of X and Y
  //use VIEW of database,get the all records
  var records = db.VIEW_SUM.ToList();
  
  List<double> dataNCDR = new List<double>();//NCDR
  List<double> databaseline = new List<double>();//baseline
  List<double> datacumulative = new List<double>();//cumulative
  List<Member> datatarget = new List<Member>();//target, X and Y
  List<double> datacumulativetarget = new List<double>();//cumulativetarget
  //spefical null,get the data for NCD,baseline,cumulative,target,cumulativetarge
  foreach (var record in records)
  {
      //note : the start is not null,so can deal with it in this way
      if (record.NCDR != null)
          dataNCDR.Add((double)record.NCDR);
      databaseline.Add((double)record.BASELINE);
      if (record.CUMULATIVE != null)
          datacumulative.Add((double)record.CUMULATIVE);
      //Member.Data is the X scale, Member.Value is the Y scale,the important is X scale
      Member temp = new Member() { Date = record.STR_YEAR_MONTH, Value = (double)record.TARGET };
      datatarget.Add(temp);
      datacumulativetarget.Add((double)record.CUMULATIVETARGET);
  }
  System.Web.UI.DataVisualization.Charting.Chart Chart1 = new System.Web.UI.DataVisualization.Charting.Chart();
  //the Height and Width of Chart1
  Chart1.Width = 800;//412
  Chart1.Height = 480;//296
  Chart1.RenderType = System.Web.UI.DataVisualization.Charting.RenderType.ImageTag;
  Chart1.Palette = ChartColorPalette.BrightPastel;
  Title t = new Title("NCDR Test MVC", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold),System.Drawing.Color.FromArgb(26, 59, 105));
  Chart1.Titles.Add(t);//add Title of Chart1
  //create a area of Chart1,use "Series 1" or others.
  Chart1.ChartAreas.Add("Series 1");
  //set Coordinate axis intervals Of X = 1
  Chart1.ChartAreas[0].AxisX.Interval = 1;   
  Chart1.ChartAreas[0].AxisX.IntervalOffset = 1;  
  //the scale of X display in one line or two line when it >= 9
  Chart1.ChartAreas[0].AxisX.LabelStyle.IsStaggered = false;   
  //change the x display Angle
  Chart1.ChartAreas[0].AxisX.LabelStyle.Angle = 45;
  //add Series, five .   the "Series 6" is used to make other effect
  Chart1.Series.Add("Series 1");
  Chart1.Series.Add("Series 2");
  Chart1.Series.Add("Series 3");
  Chart1.Series.Add("Series 4");
  Chart1.Series.Add("Series 5");
  Chart1.Series.Add("Series 6");//make other effect

  //test，in one Chart, Column 1 and Line 4
  Chart1.Series["Series 1"].ChartType = SeriesChartType.Column;//StackedColumn  Column
  Chart1.Series["Series 2"].ChartType = SeriesChartType.Line;
  Chart1.Series["Series 3"].ChartType = SeriesChartType.Line;
  Chart1.Series["Series 4"].ChartType = SeriesChartType.Line;
  Chart1.Series["Series 5"].ChartType = SeriesChartType.Line;



   ////make other effect
  Chart1.Series["Series 6"].ChartType = SeriesChartType.Point;
  // display the value of the Point
  Chart1.Series["Series 3"].IsValueShownAsLabel = true;
  Chart1.Series["Series 5"].IsValueShownAsLabel = true;
  //DataBindXY()  ,X scale,Y scale,use datatarget,"Series 4"
  Chart1.Series["Series 4"].Points.DataBindXY(datatarget, "date", datatarget, "value");
  //make Chart
  foreach (double value in dataNCDR)
  {
      Chart1.Series["Series 1"].Points.AddY(value);
  }
  foreach (double value in databaseline)
  {
      Chart1.Series["Series 2"].Points.AddY(value);
  } 
  foreach (double value in datacumulative)
  {
      //double effects use the "Series 3" and "Series 6"
      Chart1.Series["Series 3"].Points.AddY(value);
      Chart1.Series["Series 6"].Points.AddY(value);
  }
  foreach (double value in datacumulativetarget)
  {
      Chart1.Series["Series 5"].Points.AddY(value);
  }
  //NCDR,baseline,cumulative,target,cumulativetarge
  Chart1.Series["Series 1"].Name = "NCDR";
  Chart1.Series["Series 2"].Name = "baseline";
  Chart1.Series["Series 3"].Name = "cumulative";
  Chart1.Series["Series 4"].Name = "target";
  Chart1.Series["Series 5"].Name = "cumulativetarge";
  //the "Series 6" do not displey in the Legend
  Chart1.Series["Series 6"].IsVisibleInLegend = false;
  //X Title
  Chart1.ChartAreas[0].AxisX.Title = "Date";
  Chart1.ChartAreas[0].AxisX.TitleFont = new System.Drawing.Font("Anonymous Pro", 10, System.Drawing.FontStyle.Regular);
  //Y Title
  Chart1.ChartAreas[0].AxisY.Title = "Value";
  Chart1.ChartAreas[0].AxisY.TitleFont = new System.Drawing.Font("Anonymous Pro", 10, System.Drawing.FontStyle.Regular);
  //Y Major Line
  Chart1.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
  Chart1.ChartAreas[0].BorderDashStyle = ChartDashStyle.Solid;   //border Style	 
  //Border    the style of Border
  Chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
  Chart1.BorderlineWidth = 2;
  Chart1.BorderColor = System.Drawing.Color.Black;
  Chart1.BorderlineDashStyle = ChartDashStyle.Solid;
  Chart1.BorderWidth = 2;
  //the location of Legend
  Legend legend1 = new Legend();
  legend1.Docking = Docking.Top;
  legend1.Alignment = System.Drawing.StringAlignment.Center;
  Chart1.Legends.Add(legend1);
  //IO
  MemoryStream imageStream = new MemoryStream();
  Chart1.SaveImage(imageStream, ChartImageFormat.Png);
  imageStream.Position = 0;
  return new FileStreamResult(imageStream, "image/png");
}
public ActionResult About()
{
  return View();
}
}
}


Home/index.cshtml 


@model WebGrid
@{
ViewBag.Title = "Test";
}
<div id="DivGrid">
@Model.GetHtml(
columns: @Model.Columns(
@Model.Column("ID", "NO"),
@Model.Column("STR_YEAR_MONTH", format: @<i>@item.STR_YEAR_MONTH</i>, canSort: false),
@Model.Column("NCDR", "NCDR", format: @<b><i>@item.NCDR</i></b>, canSort: false),
@Model.Column("baseline", format: @<i>@item.baseline</i>, canSort: false),
@Model.Column("cumulative",format: @<i>@item.cumulative</i>, canSort: false),
@Model.Column("target", format: @<i>@item.target</i>, canSort: false),
@Model.Column("cumulativetarget", format: @<i>@item.cumulativetarget</i>, canSort: false)),
tableStyle: "grid", headerStyle: "headerStyle1",
selectedRowStyle: "selectedRowStyle",
caption: "List METRICS_DATA Table",
displayHeader: !IsPost,
fillEmptyRows: !IsPost,
emptyRowCellValue: "",
mode: WebGridPagerModes.All,
firstText: "First",
previousText: "Previous", nextText: "Next",
lastText: "Last"
)
</div>
<h3>
Page Count:
@Html.Encode(@Model.PageCount)
<br/>
Total Record:
@Html.Encode(@Model.TotalRowCount)
</h3>
<div>
<img src="/Home/GetChart" alt="Chart" />
</div>


Member.cs 


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MvcMetrics.Models
{
public class Member
{
public string Date { get; set; }
public double Value { get; set; }
}
}


版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。 
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/188655.html原文链接：https://javaforall.cn
 
 【正版授权，激活自己账号】：  Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛  
 
 【官方授权 正版激活】：  官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...  


 赞 (0)




  全栈程序员-用户IM全栈程序员-用户IM 


  0  0
 
blank








相关推荐




发表回复
您的电子邮箱地址不会被公开。 


  










                                                                        
 关注全栈程序员社区公众号