碼上快樂

相關內容    簡體    繁體

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

本文轉載自   查看原文   2018-09-01 00:56   889    【 HighCharts 統計報表】/ 【Asp.Net Mvc】/ 【.Net】

開發背景：　　

　　今天在做一個關於商城后台金額報表統計的功能，為了讓數據直觀明了並且這個報表還需要在手機端自適應所以我決定采用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地址：

　　學習需要一步一步來，從小事做起，從點滴做起，用心去做好每一個功能，不僅僅是對自己客戶負責，更是對自己負責。

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

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 AchartEngineActivity引擎繪制柱狀圖、曲線圖 Asp .net MVC4 利用Highcharts.js 生成曲線圖 WPF、Silverlight項目中使用柱狀圖、餅狀圖、折線圖 機器學習-Matplotlib繪圖（柱狀圖，曲線圖，點圖） iOS:使用貝塞爾曲線繪制圖表（折線圖、柱狀圖、餅狀圖） highchart應用示例2-上：圓角柱狀圖，下：多指標曲線圖 Qt編寫的項目作品17-自定義曲線圖柱狀圖 WPF 自定義圖表（柱狀圖，曲線圖） asp.net MVC項目開發之統計圖echarts柱狀圖（一） Qt QChart之曲線圖,餅狀圖,條形圖使用
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM