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

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

      博客原地址及其效果图展示：https://www.cnblogs.com/Can-daydayup/p/9568913.html

　　Highcharts地址：https://www.hcharts.cn/demo/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();
            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获取报表数据并以曲线图的形式展示";
}



    
    
    
    
    
    
    
    
    
    

    



    
    


    

二、柱状图：

三、饼图：

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



    
    
    
    

    

    

    

    



    

    

　学习需要一步一步来，从小事做起，从点滴做起。假如这篇文章能够帮到大家麻烦给个推荐，感谢，需要demo也可以找我，发邮箱！