ASP.NET MVC 3 中 Chart 的使用 Demo

首先在项目中添加对 System.Web.DataVisualization.dll 的引用。

然后在 web.config 中

    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      </assemblies>
    </compilation>

并且

    <pages>
      <namespaces>
        <add namespace="System.Web.UI.DataVisualization"/>
      </namespaces>
    </pages>

代码如下：

ChatController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace DearBruce.ChatDemo.WebUI.Controllers
{
    public class ChatController : Controller
    {
        //
        // GET: /Chat/
        [HttpGet]
        public ActionResult Index()
        {
            return View();
        }

        [HttpGet]
        public ActionResult Simple()
        {
            return View();
        }

        [HttpGet]
        public ActionResult Primary()
        {
            return View();
        }

        [HttpGet]
        public ActionResult Middle()
        {
            return View();
        }

        [HttpGet]
        public ActionResult High()
        {
            return View();
        }

    }
}

Simple.cshtml

@{
    Layout = null;
    var xVal = new[] { "林俊杰", "林宇中", "林正英", "林志颖", "林志玲" };
    var type = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;
    var key = new Chart( 600, height: 400, theme: ChartTheme.Green, themePath: null)
    .AddTitle(text: "使用数组作为数据源：http://music.cnblogs.com/", name: "chat1")
    .AddSeries(
            name: "Student"
            , xValue: new[] { "张学友", "张曼玉", "张梓琳", "张作霖", "张之亮" }
            , yValues: new[] { "2", "6", "4", "5", "3" }
            , chartType: type.ToString()
            , axisLabel: "获取或设置系列的轴标签文本 - 自由王者"
            , legend: xVal[3]
            , markerStep: 3
    )
    .AddSeries(
            name: "Teacher"
            , xValue: new[] { "*德华", "*晓东", "***", "*华军", "*民舫" }
            , yValues: new[] { "12", "16", "21", "15", "13" }
            , chartType: type.ToString(),
            //, chartArea: "chartArea" 
            //获取或设置用于绘制数据系列的 ChartArea 对象（如果有）的名称。
           axisLabel: "获取或设置系列的轴标签文本 - 测试张三"
    )
    .Write();
}

Primary.cshtml

@using DearBruce.ChatDemo.WebUI.Models
@{
    Layout = null;
}

@*@{
    IList<ProductModels> list = ProductBLL.GetAllProduct();

    var xVal = new[] { "Peter", "Andrew", "Julie", "Mary", "gu" };
    var type = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;
    var chart = new Chart( 600, height: 400, theme: ChartTheme.Green // , themePath: null
        )
        .AddTitle(text: "使用自定义的类通过绑定作为数据源", name: "入门图表")
        .AddSeries(
                name: "产品"
                , xValue: list
                , yValues: list
                , chartType: type.ToString()
                //, chartArea: "chartArea" //获取或设置用于绘制数据系列的 ChartArea 对象（如果有）的名称。
                , axisLabel: "获取或设置系列的轴标签文本"
                // , legend: "ProduceYear"
                , markerStep: 1
                , xField: "ProductName"
                , yFields: "ProduceYear"
        )
        .DataBindTable(list, xField: "ProductName")
        .AddLegend(title: "添加图注")
        .Write();
    //string xmlPath = "savedchart.xml";
    //chart.SaveXml(xmlPath);
}*@

@{
    List<Article> list = new List<Article>();
    for (int i = 0; i < 5; i++) {
        list.Add(new Article() { Name = "name" + i, Order = i, Content = "Content" + i });
    }

    var xVal = new[] { "Peter", "Andrew", "Julie", "Mary", "gu" };
    var type = System.Web.UI.DataVisualization.Charting.SeriesChartType.Column;
    var chart = new Chart( 600, height: 400
             , theme: ChartTheme.Green
           //  , themePath: null
            )
            .AddTitle(text: "使用自定义的类通过绑定作为数据源 http://facingwaller.cnblogs.com/", name: "chat1")
         .AddSeries(
                name: "文章"
             , xValue: list
         , yValues: list
                , chartType: type.ToString()
        //, chartArea: "chartArea" //获取或设置用于绘制数据系列的 ChartArea 对象（如果有）的名称。
                , axisLabel: "获取或设置系列的轴标签文本"
        // , legend: "Order"
                , markerStep: 1
                , xField: "Name"
                , yFields: "Order"
                )
                .DataBindTable(list, xField: "Name")
                .AddLegend(title: "添加图注")
         .Write();
    string xmlPath = "savedchart.xml";     
    chart.SaveXml(xmlPath);
}

Middle.cshtml

@using System.Data;
@{
    Layout = null;
}
@{
    var dataSet = new DataSet();
    dataSet.ReadXml(Server.MapPath("/App_Data/data.xml"));
    var dataView = new DataView(dataSet.Tables[0]);

    var mychart = new Chart(
                 400, 
                height: 300,
                theme: ChartTheme.Vanilla
            )
            .AddTitle("使用XML作为数据源   http://facingwaller.cnblogs.com/")
            .AddSeries(
                "Default", 
                chartType: "Pie",
                xValue: dataView,
                yValues: dataView, 
                xField: "Name",
                yFields: "Sales"
            );
    mychart.Write();
}

High.cshtml

@{
    Layout = null;
}
@{
    //保存到缓存
    var mychart = Chart.GetFromCache("mychartkey");
    if (mychart != null)
    {
        mychart.AddTitle("缓存不为空，从缓存中读出：" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"));
        mychart.Write();
    }
    else
    {
        mychart = new Chart( 600, height: 400)
            .AddTitle("缓存为空，写缓存，时间：" + DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"))
            .AddSeries(
                name: "Employee",
                xValue: new[] { "Peter", "Andrew", "Julie", "Mary", "Dave" },
                yValues: new[] { "2", "6", "4", "5", "3" }
            )
            .Write();
        mychart.SaveToCache(key: "mychartkey", minutesToCache: 1 /* 缓存1分钟 */, slidingExpiration: false);
    }
    mychart.SaveXml(Server.MapPath("~/保存的图表.xml")); 
}

 

运行截图：

Demo 下载：http://files.cnblogs.com/Music/ASPNETMVC3ChatSimpleDemo.rar

谢谢浏览！