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

时间：2018-09-01 12:20:01 阅读：257 评论：0 收藏：0 [点我收藏+]

　　今天在做一个关于商城后台金额报表统计的功能，为了让数据直观明了并且这个报表还需要在手机端自适应所以我决定采用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也可以找我，发邮箱！

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

标签：请求 ati code 标题 ber grid this 形式 ieda

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行