asp.net web form 使用echart 图表

最新推荐文章于 2023-11-08 13:55:16 发布

罗汉松驻扎的工作基地

最新推荐文章于 2023-11-08 13:55:16 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/MFCdestoryer/article/details/116295271

版权

之前写了一篇关于 asp.net mvc 的echart 简单使用方法，今天来一个web form 页面的。本人菜鸟，写错的请谅解。

首先要讲一下：在mvc里面，我们可以直接通过前台ajax请求，后台 actionResult 返回json 的方法显示数据图表，

而在web form 里面，我平时是使用 Generic handler（一般性处理文件ashx来）来接受前台的ajax 请求，然后 context.Response.Write(jsonstr) 返回给前台。

首先在web form项目种加入一个新的 aspx 页面，比方说 MyDong.aspx , 在前台引入jquery.js 和 echart.js

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MyDong.aspx.cs" Inherits="webformEchart1.MyDong" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.10.2.min.js"></script>
</head>

<body>
    <form id="form1" runat="server">
        <div>
            <p>my page:动态</p>
            <div id="m2" style="width:600px ; height:400px;"></div>
        </div>
    </form>

    <script src="Scripts/ECharts/echarts-all.js"></script>
    <script type="text/javascript">

        $(function () {


            $.ajax({
                type: "POST",
                url: "/EchartHandler.ashx",
                data: {'TestAction':19 },
                success: function (data) {
                    //构造图表
                    var myChart2 = echarts.init(document.getElementById('m2'));
                    //配置参数
                    option2 = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        legend: data.le,
                        xAxis: data.xa,
                        yAxis: {},
                        series: data.se
                    };
                    //使用参数
                    myChart2.setOption(option2);
                },  //end success
                error: function (jqXHR) {

                }
            });  //end ajax



        });  //end page ready

    </script>

</body>
</html>

然后添加一个 ashx（一般性处理文件）：右键项目==》 ADD ==》 New Item ==》Generic handler

比方说，命名为 EchartHandler.ashx

建立号了 ashx文件之后，可以看到原始自动生成的代码是：

   public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            //你在这里加入你自己的代码，比方说去database 里面查询数据，然后 构造json 
            //response.ContentType 改为 application/json 

            context.Response.Write("Hello World");
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

然后可以开始改写逻辑代码了（我用了三个类 ChartSeries 、 ChartXAxis 、 ChartLegend 来封装echart图片的配置）：

public class EchartHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/json";   //;  text/plain
            string qianta = context.Request["TestAction"].ToString();

            ChartSeries series1 = new ChartSeries();
            series1.type = "bar";
            series1.name = "2015";
            series1.data = new List<int>();
            series1.data.Add(89);
            series1.data.Add(92);
            series1.data.Add(94);
            series1.data.Add(85);
            List<ChartSeries> seriesList = new List<ChartSeries>() { series1 };

            ChartXAxis xAxis = new ChartXAxis();
            xAxis.type = "category";
            xAxis.data = new List<string>();
            xAxis.data.Add("牛奶");
            xAxis.data.Add("橙汁");
            xAxis.data.Add("可乐");
            xAxis.data.Add("雪碧");

            ChartLegend legend = new ChartLegend();
            legend.data = new List<string>();
            foreach (var sitem in seriesList)
            {
                legend.data.Add(sitem.name);
            }

            string jsonstr= JsonConvert.SerializeObject(new { se = seriesList, xa = xAxis, le = legend });
            context.Response.Write(jsonstr);
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }

 
    public class ChartSeries
    {
        public string type { get; set; }
        public string name { get; set; }
        public List<int> data { get; set; }
    }

    public class ChartXAxis
    {
        public string type { get; set; }
        public List<string> data { get; set; }
    }

    public class ChartLegend
    {
        public List<string> data { get; set; }
    }

写到这里就可以运行代码了

其实mvc 和 web form 最大的区别就是（纯属个人理解，可能理解有误）：

mvc里面可以通过controller 返回前台需要的各种 action ，如json 、 text 、file 等，前台html 配合js 来操作显示内容界面。

web form 希望通过服务器控件（runat=server）直接像winForm一样开发，不用考虑html 和js 。当然web from 也提供了 ashx 一般性处理文件等来接收前台页面 ajax post 过来的请求，返回后依然可以通过js 和 html 控制显示内容。

罗汉松驻扎的工作基地

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
asp.net web form 使用echart 图表

之前写了一篇关于 asp.net mvc 的echart 简单使用方法，今天来一个web form 页面的。本人菜鸟，写错的请谅解。首先要讲一下：在mvc里面，我们可以直接通过前台ajax请求，后台 actionResult 返回json 的方法显示数据图表，而在web form 里面，我平时是使用 Generic handler（一般性处理文件ashx来）来接受前台的ajax 请求，然后context.Response.Write(jsonstr) 返回给前台。首先在...
复制链接

扫一扫