ASP.NET MVC 中使用Highcharts+Ajax+Json生成動態曲線圖，柱狀圖，餅圖

時間  2019-11-25
標籤 asp.net asp mvc 使用 highcharts+ajax+json highcharts ajax json 生成 動態 曲線圖 柱狀 餅圖 欄目 ASP 简体版
原文   原文鏈接

開發背景：　　

　　今天在作一個關於商城後臺金額報表統計的功能，爲了讓數據直觀明瞭而且這個報表還須要在手機端自適應因此我決定採用HIghCharts插件下的的報表，你們也能夠去了解一下免費開源主要是好看。javascript

首先是後臺代碼：

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);
        }

    }
}

 

前端代碼（曲線圖，柱狀圖，餅圖）：

1、曲線圖：

@{
    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>

運行效果以下：

2、柱狀圖：

<!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>

運行效果以下：

3、餅圖：

@{
    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地址：

　　學習須要一步一步來，從小事作起，從點滴作起，用心去作好每個功能，不單單是對本身客戶負責，更是對本身負責。html

博客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，接下來我就直接上代碼了。前端

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程