图表

最新推荐文章于 2021-02-05 17:16:17 发布

diankui6178

最新推荐文章于 2021-02-05 17:16:17 发布

阅读量78

点赞数

文章标签： json javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/hellowzd/p/4355676.html

版权

前台

@{
    ViewBag.Title = "";
    Layout = "~/Views/Shared/ExtJs_Layout.cshtml";
}
@section script{




<script type="text/javascript">

    Ext.require('Ext.chart.*');
    Ext.require(['Ext.Window', 'Ext.fx.target.Sprite', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);

    Ext.onReady(function () {
        var textArea;



       
        Ext.define('User', {
            extend: 'Ext.data.Model',
            fields: [
                { name: 'name', type: 'string' },
                { name: 'data1', type: 'int' }
            ]
        });

        window.store1 = Ext.create('Ext.data.Store', {
            model: 'User',
            proxy: {
                type: 'ajax',
                url: '/api/Anm/DeathStatistics/GetEnable',
                reader: {
                    type: 'json'
                }
            },
            autoLoad: true
        });




        Ext.define('Ext.chart.theme.CustomBlue', {
            extend: 'Ext.chart.theme.Base',

            constructor: function (config) {
                var titleLabel = {
                    font: 'bold 18px Arial'
                }, axisLabel = {
                    fill: 'rgb(8,69,148)',
                    font: '12px Arial',
                    spacing: 2,
                    padding: 5
                };

                this.callParent([Ext.apply({
                    axis: {
                        stroke: '#084594'
                    },
                    axisLabelLeft: axisLabel,
                    axisLabelBottom: axisLabel,
                    axisTitleLeft: titleLabel,
                    axisTitleBottom: titleLabel
                }, config)]);
            }
        });

        var chart = Ext.create('Ext.chart.Chart', {
            animate: true,
            shadow: true,
            store: store1,
            axes: [{
                type: 'Numeric',
                position: 'bottom',
                fields: ['data1'],
                label: {
                    renderer: Ext.util.Format.numberRenderer('0,0')
                },
                title: 'Number of Hits',
                grid: true,
                minimum: 0
            }, {
                type: 'Category',
                position: 'left',
                fields: ['name'],
                title: 'Month of the Year'
            }],
            theme: 'CustomBlue',
            background: {
                gradient: {
                    id: 'backgroundGradient',
                    angle: 45,
                    stops: {
                        0: {
                            color: '#ffffff'
                        },
                        100: {
                            color: '#eaf1f8'
                        }
                    }
                }
            },
            series: [{
                type: 'bar',
                axis: 'bottom',
                highlight: true,
                tips: {
                    trackMouse: true,
                    width: 140,
                    height: 28,
                    renderer: function (storeItem, item) {
                        this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data1') + ' views');
                    }
                },
                label: {
                    display: 'insideEnd',
                    field: 'data1',
                    renderer: Ext.util.Format.numberRenderer('0'),
                    orientation: 'horizontal',
                    color: '#333',
                    'text-anchor': 'middle'
                },
                xField: 'name',
                yField: ['data1']
            }]
        });

        var win = Ext.create('Ext.window.Window', {
            width: 800,
            height: 600,
            minHeight: 400,
            minWidth: 550,
            hidden: false,
            maximizable: true,
            title: 'Bar Chart',
            autoShow: true,
            layout: 'fit',
            tbar: [{
                text: 'Save Chart',
                handler: function () {
                    Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
                        if (choice == 'yes') {
                            chart.save({
                                type: 'image/png'
                            });
                        }
                    });
                }
            }, {
                text: 'Reload Data',
                handler: function () {
                    // Add a short delay to prevent fast sequential clicks
                    window.loadTask.delay(100, function () {
                        store1.loadData(generateData());
                    });
                }
            }],
            items: chart
        });
    });

</script>


}

控制器

using System.Collections.Generic;
using System.Web.Mvc;
using NXT.Models;
using System.Text;
using System.Net.Http;
using System.Web.Script.Serialization;
using System.Web.Http;


namespace NXT.Areas.Anm.Controllers
{
    public class DeathStatisticsController : Controller//新建一个控制器类
    {            
        public ActionResult Index()//显示前台页面的方法
        {           
            return View();//显示前台页面
        }    
}

    public class DeathStatisticsApiController : ApiController//新建一个api类
    {

        [System.Web.Http.HttpGet]//打开网络
        public HttpResponseMessage PostDeath()//封装一个方法
        {
            bus_RFIDService sysuser = new bus_RFIDService();//调用一个类
            List<DataMode> list = sysuser.GetDeath();//调用类里的方法，模型传来的数据
            JavaScriptSerializer serializer = new JavaScriptSerializer();//调用一个类
            string str = serializer.Serialize(list);//调用类里的方法，把模型传来的数据进行处理
            HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(str, Encoding.GetEncoding("UTF-8"), "application/json") };//新建一个类并调用其中的方法
            return result;//返回json，前台js请求这个控制器，控制器会返回给js一个json
        }

        public HttpResponseMessage GetEnable()//封装一个方法
        {
            bus_RFIDService sysuser = new bus_RFIDService();//调用一个类

            List<DataMode> list = sysuser.GetUse();//调用类里的方法，模型传来的数据,修改
            
            JavaScriptSerializer serializer = new JavaScriptSerializer();//调用一个类
            string str = serializer.Serialize(list);//调用类里的方法，把模型传来的数据进行处理
            HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(str, Encoding.GetEncoding("UTF-8"), "application/json") };//新建一个类并调用其中的方法
            return result;//返回json，前台js请求这个控制器，控制器会返回给js一个json
        }


        public HttpResponseMessage GetOuts()//封装一个方法
        {
            bus_RFIDService sysuser = new bus_RFIDService();//调用一个类

            List<DataMode> list = sysuser.GetOut();//调用类里的方法，模型传来的数据,修改

            JavaScriptSerializer serializer = new JavaScriptSerializer();//调用一个类
            string str = serializer.Serialize(list);//调用类里的方法，把模型传来的数据进行处理
            HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(str, Encoding.GetEncoding("UTF-8"), "application/json") };//新建一个类并调用其中的方法
            return result;//返回json，前台js请求这个控制器，控制器会返回给js一个json
        }


        public HttpResponseMessage GetWeeks()//封装一个方法
        {
            bus_RFIDService sysuser = new bus_RFIDService();//调用一个类

            List<DataMode> list = sysuser.GetWeek();//调用类里的方法，模型传来的数据,修改

            JavaScriptSerializer serializer = new JavaScriptSerializer();//调用一个类
            string str = serializer.Serialize(list);//调用类里的方法，把模型传来的数据进行处理
            HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(str, Encoding.GetEncoding("UTF-8"), "application/json") };//新建一个类并调用其中的方法
            return result;//返回json，前台js请求这个控制器，控制器会返回给js一个json
        }

        public HttpResponseMessage GetAlls()//封装一个方法
        {
            bus_RFIDService sysuser = new bus_RFIDService();//调用一个类

            List<DataMode> list = sysuser.GetAll();//调用类里的方法，模型传来的数据,修改

            JavaScriptSerializer serializer = new JavaScriptSerializer();//调用一个类
            string str = serializer.Serialize(list);//调用类里的方法，把模型传来的数据进行处理
            HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(str, Encoding.GetEncoding("UTF-8"), "application/json") };//新建一个类并调用其中的方法
            return result;//返回json，前台js请求这个控制器，控制器会返回给js一个json
        }

        public HttpResponseMessage GetSums()//封装一个方法
        {
            bus_RFIDService sysuser = new bus_RFIDService();//调用一个类

            List<DataMode> list = sysuser.GetSum();//调用类里的方法，模型传来的数据,修改

            JavaScriptSerializer serializer = new JavaScriptSerializer();//调用一个类
            string str = serializer.Serialize(list);//调用类里的方法，把模型传来的数据进行处理
            HttpResponseMessage result = new HttpResponseMessage { Content = new StringContent(str, Encoding.GetEncoding("UTF-8"), "application/json") };//新建一个类并调用其中的方法
            return result;//返回json，前台js请求这个控制器，控制器会返回给js一个json
        }


    }

}

后台

using System;
using System.Collections.Generic;
using System.Text;
using NXT.Core;

namespace NXT.Models
{
    [Module("Anm")]
    public class bus_RFIDService : ServiceBase<bus_RFID>
    {


        public dynamic GetAmountPen()
        {
            var result = db.Sql("select pen_name as name,count(R.RFID_id) as data1 from dbo.bus_RFID R join dbo.bas_pen P on R.bas_pen_id=P.bas_pen_id group by pen_name").QueryMany<DataMode>(); ;
            return result;
        }

        
        public dynamic GetDeath()
        {
            var data = db.Sql("select ' 死亡羊数' as name, COUNT(*) data1 from bus_RFID where isdead = 'True' union select '未死亡羊数' as name ,COUNT(*) data1 from bus_RFID where isdead = 'False'  ").QueryMany<DataMode>(); ;
            return data;
        }

        public dynamic GetUse()
        {
            var use = db.Sql(" select '1月份' as name, COUNT(*) as data1 from bus_RFID where MONTH(introduce_time) = '1' union select '2月份' as name,COUNT(*) as data2 from bus_RFID where MONTH(introduce_time) = '2' union select '3月份' as name,COUNT(*) as data3 from bus_RFID where MONTH(introduce_time) = '3' union select '4月份' as name,COUNT(*) as data4 from bus_RFID where MONTH(introduce_time) = '4' union select '5月份' as name,COUNT(*) as data5 from bus_RFID where MONTH(introduce_time) = '5' union select '6月份' as name,COUNT(*) as data6 from bus_RFID where MONTH(introduce_time) = '6' union select '7月份' as name,COUNT(*) as data7 from bus_RFID where MONTH(introduce_time) = '7' union select '8月份' as name,COUNT(*) as data8 from bus_RFID where MONTH(introduce_time) = '8' union select '9月份' as name,COUNT(*) as data9 from bus_RFID where MONTH(introduce_time) = '9' union  select '10月份' as name,COUNT(*) as data10 from bus_RFID where MONTH(introduce_time) = '10' union select '11月份' as name,COUNT(*) as data11 from bus_RFID where MONTH(introduce_time) = '11' union select '12月份' as name,COUNT(*) as data12 from bus_RFID where MONTH(introduce_time) = '12'").QueryMany<DataMode>();
            //var use = db.Sql("select ' 可用羊数' as name, COUNT(*) data1 from bus_RFID where isenable = 'True' union select '不可用羊数' as name ,COUNT(*) data1 from bus_RFID where isenable = 'False' ").QueryMany<DataMode>();
            return use;
        
        }

        public dynamic GetOut()
        { 
            var outs = db.Sql("select '出栏羊数' as name, COUNT(*) data1 from bus_RFID where isout = 'True' union select '未出栏羊数' as name ,COUNT(*) data1 from bus_RFID where isout = 'False' ").QueryMany<DataMode>();
            return outs;
        }


        public dynamic GetWeek()
        {
            var week = db.Sql("select '淘汰羊数' as name, COUNT(*) data1 from bus_RFID where isweekout = 'True' union select '未淘汰羊数' as name ,COUNT(*) data1 from bus_RFID where isweekout = 'False'  ").QueryMany<DataMode>();
            return week;
        }


        public dynamic GetAll()
        {
            var week = db.Sql("select ' 死亡羊数' as name, COUNT(*) data1 from bus_RFID where isdead = 'True' union select '不可用羊数' as name ,COUNT(*) data1 from bus_RFID where isenable = 'True' union select '出栏羊数' as name, COUNT(*) data1 from bus_RFID where isout = 'True' union select '淘汰羊数' as name, COUNT(*) data1 from bus_RFID where isweekout = 'True' ").QueryMany<DataMode>();
            return week;
        }

        public dynamic GetSum()
        {
            var sum = db.Sql("select ' 死亡羊数' as name, COUNT(*) data1 from bus_RFID where isdead = 'True' union select '不可用羊数' as name ,COUNT(*) data1 from bus_RFID where isenable = 'True' union select '出栏羊数' as name, COUNT(*) data1 from bus_RFID where isout = 'True' union select '淘汰羊数' as name, COUNT(*) data1 from bus_RFID where isweekout = 'True' union select '总数' as name,COUNT(*) data1 from bus_RFID  ").QueryMany<DataMode>();
            return sum;
        }



    }


    public class DataMode
    {
        public string name { get; set; }
        public int data1 { get; set; }
                    
    }
    public class bus_RFID : ModelBase
    {
        [PrimaryKey]   
        public string RFID_id { get; set; }
        public string male_RFID { get; set; }
        public string female_RFID { get; set; }
        public string bas_pen_id { get; set; }
        //public string FRID_note { get; set; }
        public string breed { get; set; }
        public string sex { get; set; }
        public string purpose { get; set; }
        public string introduce_source { get; set; }
        public DateTime introduce_time { get; set; }
        public DateTime birthday { get; set; }
        public string note { get; set; }
        public bool isdead { get; set; }
        public bool isenable { get; set; }
        public bool isout { get; set; }
        public bool isweekout { get; set; }
        public double introduce_weight { get; set; }
        public string grade { get; set; }

        public string ApproveState { get; set; }
        public string ApprovePerson { get; set; }
        public DateTime? ApproveDate { get; set; }
        public string ApproveRemark { get; set; }
    }
}