ASP.NET MVC 中使用Highcharts+Ajax+Json生成动态曲线图，柱状图，饼图

开发背景：　　

　　今天在做一个关于商城后台金额报表统计的功能，为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用HIghCharts插件下的的报表，大家也可以去了解一下免费开源主要是好看。

首先是后台代码：

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

namespace HighChartsReports.Controllers
{

    /// 

    /// 自定义数据类型（饼图需要使用的json数据）
    /// 
    public class MyReportDatas
    {
        public string time { get; set; }
        public int Count { get; set; }
    }

    public class ReportController : Controller
    {
        /// 

        /// 曲线图
        /// 
        /// 
        public ActionResult Diagram()
        {
            return View();
        }

        /// 

        /// 柱状图
        /// 
        /// 
        public ActionResult BarGraph()
        {
            return View();
        }

        /// 

        /// 饼图
        /// 
        /// 
        public ActionResult Piechart()
        {
            return View();
        }


        /// 

        /// 获取数据接口
        /// 
        /// 前多少天
        /// 请求类型
        /// 
        [HttpPost]
        public JsonResult GetDataList(int BeformDays,int Type)
        {
         //时间当然大家可以根据自己需要统计的数据进行整合我这里是用来 
          演示就没有用数据库了
            var Time = new List();
            //数量
            var Count = new List<int>();
            var PieData=new List();
            //Type为1表示曲线和柱状数据
            if (Type==1)
            {
                for (int i = 0; i < BeformDays; i++)
                {
                    Time.Add(DateTime.Now.AddDays(- 
                    BeformDays).ToShortDateString());
                    Count.Add(i + 1);
                }    
            }
            else//饼状图
            {
                for (int i = 0; i < BeformDays; i++)
                {
                    var my = new MyReportDatas();
                    my.Count = i + 1;
                    my.time = DateTime.Now.AddDays(- 
                    BeformDays).ToShortDateString();
                    PieData.Add(my);
                } 
            }
           

            var Obj = new 
            { 
                Times=Time,
                Counts=Count,
                PieDatas = PieData
            };

            return Json(Obj,JsonRequestBehavior.AllowGet);
        }

    }
}

 

前端代码（曲线图，柱状图，饼图）：

一、曲线图：

@{
    ViewBag.Title = "通过Ajax获取报表数据并以曲线图的形式展示";
}



    "Content-Type" content="text/html; charset=utf-8">
    
    "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    
    
    
    
    
    
    

    



    
    
"container">

    

运行效果如下：

二、柱状图：

    "Content-Type" content="text/html; charset=utf-8">
    
    "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    
    
    
    

    



    
    
"container">
    

运行效果如下：

三、饼图：

@{
    ViewBag.Title = "饼图";
}



    "Content-Type" content="text/html; charset=utf-8">
    
    "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    

    

    

    

    



    
"container">
    

运行效果如下：

 

 总结并附加Demo地址：

　　学习需要一步一步来，从小事做起，从点滴做起，用心去做好每一个功能，不仅仅是对自己客户负责，更是对自己负责。

博客demo下载地址：（https://github.com/YSGStudyHards/ShipBuilding/tree/master/C%23%EF%BC%8C.Net%EF%BC%8C.Net%20Core%20%E7%BC%96%E7%A8%8B%E7%BB%83%E4%B9%A0/HighChartsReports%EF%BC%88.net%20mvc%E6%8A%A5%E8%A1%A8%EF%BC%89）Highcharts地址：https://www.hcharts.cn/demo/highcharts，接下来我就直接上代码了。