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

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

　　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
{

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

    public class ReportController : Controller
    {
        /// <summary>
        /// 曲线图
        /// </summary>
        /// <returns></returns>
        public ActionResult Diagram()
        {
            return View();
        }

        /// <summary>
        /// 柱状图
        /// </summary>
        /// <returns></returns>
        public ActionResult BarGraph()
        {
            return View();
        }

        /// <summary>
        /// 饼图
        /// </summary>
        /// <returns></returns>
        public ActionResult Piechart()
        {
            return View();
        }

        /// <summary>
        /// 获取数据接口
        /// </summary>
        /// <param name="BeformDays">前多少天</param>
        /// <param name="Type">请求类型</param>
        /// <returns></returns>
        [HttpPost]
        public JsonResult GetDataList(int BeformDays,int Type)
        {
         //时间当然大家可以根据自己需要统计的数据进行整合我这里是用来
          演示就没有用数据库了
            var Time = new List<String>();
            //数量
            var Count = new List<int>();
            var PieData=new List<MyReportDatas>();
            //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获取报表数据并以曲线图的形式展示";
}
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--这是个好东西，设置屏幕密度为高频，中频，底频，禁止用户手动调整缩放-->
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>曲线图</title>
    <script type="text/javascript" src="~/Content/js/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="~/Content/js/highcharts.js"></script>
    <!--报表打印和下载图片-->
    <script type="text/javascript" src="~/Content/download/exporting.js" charset="gb2312"></script>
    <!--黑色皮肤插件-->
    <script type="text/javascript" src="~/Content/js/theme/gray.js"></script>

    <script type="text/javascript">

        var chart;
        $(document).ready(function () {
            var Time = new Array();//存储时间
            var Count = new Array();//存储数量
            //获取数据
            $.ajax({
                async: false,
                type: ‘post‘,
                datatype: ‘json‘,
                url: ‘/Report/GetDataList‘,
                data: { BeformDays: 7, Type: 1 },//获取前七天的数据，
                success: function (Data) {
                    console.log(Data.Times);
                    console.log(Data.Counts);
                    Time = Data.Times;
                    Count = Data.Counts;
                }

            })

            //highchants样式渲染
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: ‘container‘,//放置图表的容器
                    plotBackgroundColor: null,//绘图背景颜色
                    plotBorderWidth: null,//绘图边框宽度
                    defaultSeriesType: ‘line‘//我在这里选折曲线//图表类型样式line, spline, area, areaspline, column, bar, pie , scatter这些样式随你选
                },
                title: {
                    text: ‘曲线图统计‘
                },
                subtitle: {
                    text: ‘‘//副标题
                },
                xAxis: {//X轴数据
                    categories: StitchingData(Time),//存储数组格式的那么我们自己拼接一下数据格式吧
                        rotation: -45, //字体倾斜
                        align: ‘right‘,
                        style: { font: ‘normal 13px 宋体‘ }
                    }
                },
                yAxis: {//Y轴显示文字
                    title: {
                        text: ‘产量/百万‘
                    }
                },
                //点击事件
                tooltip: {
                    enabled: true,
                    formatter: function () {
                        return ‘<b>‘ + this.x + ‘</b><br/>‘ + this.series.name + ‘: ‘ + Highcharts.numberFormat(this.y, 1);
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: true//是否显示title
                    }
                },
                series: [{
                    name: ‘产量统计报表‘,
                    data: StitchingData(Count), //这里也是一样的需要自己拼接数组对象
        });

        //数据拼接
        function StitchingData(data)
        {
            var Datas = new Array();
            for (var i = 0; i < data.length; i++) {
                Datas[i] = data[i];//将数据添加到数据中
            }
            console.log(Datas);
            return Datas;
        }
        });
    </script>

</head>
<body>
    <!--内容存放处-->
    <div id="container">

    </div>
</body>
</html>

运行效果如下：

二、柱状图：

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--这是个好东西，设置屏幕密度为高频，中频，底频，禁止用户手动调整缩放-->
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>柱状图(有没有发现呀这个和曲线图其实是一样的只是采用的展现格式不同哟哈哈)</title>
    <script type="text/javascript" src="~/Content/js/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="~/Content/js/highcharts.js"></script>
    <script type="text/javascript" src="~/Content/js/theme/grid.js"></script>

    <script type="text/javascript">

        var chart;
        $(document).ready(function () {
            var Time = new Array();//存储时间
            var Count = new Array();//存储数量
            //获取数据
            $.ajax({
                async: false,
                type: ‘post‘,
                datatype: ‘json‘,
                url: ‘/Report/GetDataList‘,
                data: { BeformDays: 7,Type:1 },//获取前七天的数据，
                success: function (Data) {
                    console.log(Data.Times);
                    console.log(Data.Counts);
                    Time = Data.Times;
                    Count = Data.Counts;
                }

            })

            //highchants样式渲染
            chart = new Highcharts.Chart({
                chart: {
                    renderTo: ‘container‘,//放置图表的容器
                    plotBackgroundColor: null,//绘图背景颜色
                    plotBorderWidth: null,//绘图边框宽度
                    defaultSeriesType:‘column‘//我在这里选折曲线//图表类型样式line, spline, area, areaspline, column, bar, pie , scatter这些样式随你选
                },
                title: {
                    text: ‘柱状图统计‘
                },
                subtitle: {
                    text: ‘‘//副标题
                },
                xAxis: {//X轴数据
                    categories: StitchingData(Time),//存储数组格式的那么我们自己拼接一下数据格式吧,
                    labels: {
                        rotation: -45, //字体倾斜
                        align: ‘right‘,
                        style: { font: ‘normal 13px 宋体‘ }
                    }
                },
                yAxis: {//Y轴显示文字
                    title: {
                        text: ‘产量/百万‘
                    }
                },
                //点击事件
                tooltip: {
                    enabled: true,
                    formatter: function () {
                        return ‘<b>‘ + this.x + ‘</b><br/>‘ + this.series.name + ‘: ‘ + Highcharts.numberFormat(this.y, 1);
                    }
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: true//是否显示title
                    }
                },
                series: [{
                    name: ‘产量统计报表‘,
                    data: StitchingData(Count), //这里也是一样的需要自己拼接数组对象
                }]
            });

            //数据拼接
            function StitchingData(data) {
                var Datas = new Array();
                for (var i = 0; i < data.length; i++) {
                    Datas[i] = data[i];//将数据添加到数据中
                }
                console.log(Datas);
                return Datas;
            }
        });
    </script>

</head>
<body>
    <!--存放内容-->
    <div id="container">
    </div>
</body>
</html>

运行效果如下：

三、饼图：

@{
    ViewBag.Title = "饼图";
}
<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!--这是个好东西，设置屏幕密度为高频，中频，底频，禁止用户手动调整缩放-->
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <title>饼图</title>

    <script type="text/javascript" src="~/Content/js/jquery-1.5.2.min.js"></script>

    <script type="text/javascript" src="~/Content/js/highcharts.js"></script>

    <script type="text/javascript" src="~/Content/js/theme/grid.js"></script>

    <script type="text/javascript">

        var chart;
        $(document).ready(function () {

            //获取数据
            $.ajax({
                async: false,
                type: ‘post‘,
                datatype: ‘json‘,
                url: ‘/Report/GetDataList‘,
                data: { BeformDays: 7, Type:2},//获取前七天的数据，
                success: function (Data) {
                    console.log(Data);
                    console.log(Data.PieDatas);

                    chart = new Highcharts.Chart({
                        chart: {
                            renderTo: ‘container‘,
                            plotBackgroundColor: null,
                            plotBorderWidth: null,
                            defaultSeriesType: ‘pie‘
                        },
                        title: {
                            text: ‘饼状图统计‘
                        },
                        tooltip: {
                            formatter: function () {
                                return ‘<b>‘ + this.point.name + ‘</b>: ‘ + this.percentage + ‘ %‘;
                            }
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true, //点击切换
                                cursor: ‘pointer‘,
                                dataLabels: {
                                    enabled: true,
                                    color: Highcharts.theme.textColor || ‘#000000‘,
                                    connectorColor: Highcharts.theme.textColor || ‘#000000‘,
                                    formatter: function () {
                                        return ‘<b>‘ + this.point.name + ‘</b>: ‘ + this.percentage + ‘ %‘;
                                    }
                                },
                                showInLegend: true
                            }
                        },
                        //传说是json格式但是还是采用了自己拼接数据方法才显示
                        series: [
                        {
                            data:StitchingData(Data.PieDatas),
                        }]
                    });
                }
            })

            //数据拼接
            function StitchingData(data) {

                var Datas = new Array();
                $.each(data, function (index, obj) {
                    Datas.push([obj.time,obj.Count]);
                })
                console.log(Datas);

                return Datas;
            }
        });
    </script>

</head>
<body>
    <div id="container">
    </div>
</body>
</html>

运行效果如下：

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

原文地址：https://www.cnblogs.com/Can-daydayup/p/9568913.html

时间： 2024-10-10 04:08:26

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

Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo

原文:Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个简单demo 源代码下载地址:http://www.zuidaima.com/share/1550463370480640.htm 此功能可以用在后端对数据的实时抓取,前端动态更新时使用,可以根据数据的变化进行实时刷新,基于之前我上传的一个图形demo改制.如有意见建议,疑问,大家可以留言一起探讨. 源代码截图:

.net MVC中Jquery实现AJAX详解

声明 这是我一边学,一边写的: 好处是:我从新手的角度出发,谈自己的理解,每一步的操作也都是按照新手入门来做,有截图. 坏处是:部分地方可能说的不到位或错误.不过作为新手,我觉得能先帮你理解着实现功能貌似更重要. 开始: 0 前言: Ajax本质是一个web数据请求的手段,既然是请求,也就是有请,有求.也就是客户端(html页面)向服务器发送请求获得数据的手段. 世间万物万变不离其宗,抓住事物本质就能让我们拨云见日: 一.在服务器端写好方法 二.在客户端写好请求 当然在这之前我们还需要有个web

Highcharts AJAX JSON JQuery 实现动态数据交互显示图表 柱形图

这是第一篇实例的步骤与代码.还有整个项目的结构图. http://my.oschina.net/xshuai/blog/345117 原创的博文.转载注明出处.大家赶紧收藏吧.  本人highcharts新手.只是做个了练手的实例.还望大神指点. 上个图给大家看下效果. 点击  查看图表 如下图展示效果 Highcharts简介 Highcharts 是一个用纯JavaScript编写的一个图表库, 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,并且免费提供给个人学习.个人网

ASP.NET MVC中如何以ajax的方式在View和Action中传递数据

前言:写这篇随笔的时候,在url上漏写了斜线,找了好久错误,整个人都很不好.#我是猪系列 背景:之前介绍过一篇如何构建ASP.NET MVC4&JQuery&AJax&JSon示例,这一篇单独讲解如何在View和Action间传递并处理数据. 1,前台HTML代码: 1 <div> 2 <button type="button" id="btn">从视图向控制器中传递数据</button> 3 <p

mvc中做一个ajax读取数据的感想

一个简单的问题纠结好好半天 一个开始随手写完,进行调试,发现ajax根本不进服务器的方法,当时想不进服务器方法估计是js方法写错了,就在js中找错,看那个方法就那几句也没找到错误,然后就想是不是自己ajax的方法写错了,然后就到网上找关于ajax的语法,结果在w3c中找到ajax,但是这个ajax是JavaScript的xmlhttprequest,虽然不是jquery的简单写法,但是看完之后还是有一些东西更明白了,但是这并不是重点,重点是我还是没有解决进不了服务器方法的错误,没找到只能再找了,

asp.net中利用Jquery+Ajax+Json实现无刷新分页(二)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PageTest.aspx.cs" Inherits="renmai_PageTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

MVC中利用ViewBag传递Json数据时的前端处理方法

用viewBag传递Json字符串到前端时,json字符串中的“会被转义为& quot,前端处理方法为@Html.Raw(Json.Encode(ViewBag.Data)),再用eval()函数解析得到json对象:var data=eval("(" + @Html.Raw(Json.Encode(ViewBag.Data)) + “)”); 如何传递的是json对象则前端使用用 jsonData=eval( @Html.Raw(ViewBag.jsonData)); 原文地

ASP.NET MVC中使用highcharts 生成简单的折线图

? ? 直接上步骤: ? 生成一个options,选项包含了一些基本的配置,如标题,坐标刻度,serial等: 配置X轴显示的Category数据,为一个数组: 配置Y轴显示的数据,也为一个数据: 用生成option构建一个Hightcharts对象,即可以自动画出一个折线图了: ? ? 1.配置BundleConfig ? bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{

servlet中如何发送ajax请求并动态拼接数据到html中

废话不多说,直接上代码 1.servlet 2.js 3.jsp 有不懂得欢迎来扣我哦^_^