现在位置首页 / 前端开发 /正文

echarts+ashx+json获取数据展示

作者: IT小兵 | 2016年6月1日| 热度:℃ | 评论: |参与:

上一篇分享了echarts+java的例子,今天分享一下echarts+ashx的demo。ashx是net提供的一般处理程序,比aspx返回的数据量少很多,适合做接口。


html代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="echart2.aspx.cs" Inherits="RTC.echart2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title> </title>
    <!-- 引入 ECharts 文件 -->
    <script src="scripts/echarts.common.min.js"></script>
    <script src="scripts/jquery-1.10.2.min.js"></script>
    <script src="scripts/json2.js"></script>
</head>
<body>
<form id="form1" runat="server">
<!-- 为 ECharts 准备一个具备大小(宽高)的Dom -->
<div id="main" style="width:1000px;height:400px;">
</div>
</form>
</body>
</html>

js代码:

<script type="text/javascript">
        var varAxis;
        var varSeries;
        //var varRtcNO = $("#txtHid").val();
        var varRtcNO = "35000002818";
        var jdata;
        var myChart = echarts.init(document.getElementById('main'));
        // 显示标题,图例和空的坐标轴
        myChart.setOption({
            title: {
                text: '温度曲线图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    animation: false
                },
                formatter: function (params) {
                    return params[0].name + '<br />温度:' + params[0].value + '°C';
                }
            },
            legend: {
                data: ['温度']
            },
            xAxis: {
                data: []
            },
            yAxis: {
                axisLabel: {
                    formatter: '{value} °C'
                },
                min: 18,
                max:30
            },
            series: [{
                name: '温度',
                type: 'line',
                smooth: true,
                data: []
            }]
        });
        // 异步加载数据
        $.ajax({
            type: "post",
            url: "getrtchistorydata.ashx?rtcno=" + varRtcNO,
            dataType: "json",
            success: function (data) {
                var varReceiver = data;
                //var varReceiver = jQuery.parseJSON(data);
                var varAxis=new Array() ;
                var varSeries = new Array(varReceiver.Count[0].total);
                
                for (var i = 0; i < varReceiver.Count[0].total; i++) {
                    varAxis.push(varReceiver.Rows[i].RecordTime);
                    varSeries[i] =  varReceiver.Rows[i].RoomTemp;
                }
                // 填入数据
                myChart.setOption({
                    xAxis: {
                        data: varAxis
                    },
                    series: [{
                        //根据名字对应到相应的系列
                        name: '温度',
                        data: varSeries
                    }]
                });
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert(errorThrown);
            }
        });
       
    </script>

    url: "getrtchistorydata.ashx?rtcno=" + varRtcNO,就是服务端接收参数和返回数据的方法。

服务端方法:

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
namespace RTC
{
    /// <summary>
    /// getrtchistorydata 的摘要说明
    /// </summary>
    public class getrtchistorydata : IHttpHandler
    {
        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string strRTCNo = context.Request.QueryString["rtcno"].ToString();
            SqlConnection con = new SqlConnection("server=192.168.0.222;uid=sa;pwd=hiwits;database=CeShi_QingDao;Max Pool Size=2048;");
            SqlCommand cmd = new SqlCommand("select RtcNO,RoomTemp,InstallPlace,convert(varchar,RecordTime,120) as RecordTime,systime  from RTCHistory where RtcNO='" + strRTCNo + "' order by InstallPlace,RecordTime", con);
            SqlDataAdapter da = new SqlDataAdapter(cmd);
            DataSet ds = new DataSet();
            da.Fill(ds);
            string stbList = "";
            stbList = "{\"Rows\":[";
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                stbList = stbList + "{ \"RecordTime\":\"" + dr[3].ToString() + "\",";
                stbList = stbList + " \"RoomTemp\":\"" + dr[1].ToString() + "\"},";
            }
            stbList = stbList.Substring(0, stbList.Length - 1);//去掉最后的一个逗号
            
            stbList = stbList + "],"; 
            stbList = stbList + "\"Count\":[{\"total\":" + ds.Tables[0].Rows .Count+ "}]";//用来记录一共返回了几条数据记录
           
            stbList = stbList + "}";
            context.htm = htm&(stbList.ToString());
        }
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
        public void RetrunHistoryData()
        {
        }
    }
}

其中,ajax的参数: dataType: "text",也可以是 dataType: "json",服务端在返回的时候,如果是json就序列化一下。请看参考。

在ajax成功后,反序列化一下就行。var varReceiver = jQuery.parseJSON(data);

参考:

[jQuery 序列化表单数据 serialize() serializeArray()]

[json序列化反序列化插件-json2.js 介绍和使用]

[利用XML序列化和Asp.Net Web站点配置文件实现缓存]

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询