Echarts学习(2)后端ajax传入数据

echarts的官网中给出的例子大多是直接在option中赋值,而网页或者其他形式的echarts需要动态获取后端数据。这时ajax传值就显得非常重要了。
我想做一个横轴是月份,纵轴为每月用水量的折线图,需要的数据是数据库用水记录表中该用水单位十二个月份的用水量数据,这在数据库中正好是一条记录,所以我需要解决的第一个问题是:后端读取数据库中的一行数据并将数据封装成数组的形式。我首先尝试的方案是,将该行数据读取到dataset里,再将dataset转成json格式传给前端,结果前端可以get到数值,但是图表不显示数据,原因在于在dataset里这行数据仍然是以一条记录的形式存在,以json格式传到前端,解析之后得到的是一个多维数组,每个维度里存放一个数据,这样的数据对于echarts比较难应用。于是我就用非常笨拙的方法将读到的结果放在一个一维数组中,然后把数组转json,前端解析json后,将数组中的每个值压入数据栈中。

 url: "DataToArray.ashx",
            dataType: "text", //返回数据形式为json
            success: function (results) {
                
                  
                results = JSON.parse(results);
               
               
                for (var i = 0; i < results.length/2; i++)
                {
              
                    data1.push(results[i]),
                        data2.push(results[i+12]),
                    //xAxisData.push((i+1)+"月")
                }
                                  部分代码展示(ajax)
  SqlConnection conn = SQLHelper.MyConnection();
                SqlCommand cmd = new SqlCommand(sql, conn);
                conn.Open();
                SqlDataReader reader = cmd.ExecuteReader();
                string[] a = new string[24];
                while (reader.Read())
                {

                    a[0] = reader["一月实际用水量"].ToString().Trim();
                    a[1] = reader["二月实际用水量"].ToString().Trim();
                    a[2] = reader["三月实际用水量"].ToString().Trim();
                    a[3] = reader["四月实际用水量"].ToString().Trim();
                    a[4] = reader["五月实际用水量"].ToString().Trim();
                    a[5] = reader["六月实际用水量"].ToString().Trim();
                    a[6] = reader["七月实际用水量"].ToString().Trim();
                    a[7] = reader["八月实际用水量"].ToString().Trim();
                    a[8] = reader["九月实际用水量"].ToString().Trim();
                    a[9] = reader["十月实际用水量"].ToString().Trim();
                    a[10] = reader["十一月实际用水量"].ToString().Trim();
                    a[11] = reader["十二月实际用水量"].ToString().Trim();
                    a[12] = reader["一月计划用水量"].ToString().Trim();
                    a[13] = reader["二月计划用水量"].ToString().Trim();
                    a[14] = reader["三月计划用水量"].ToString().Trim();
                    a[15] = reader["四月计划用水量"].ToString().Trim();
                    a[16] = reader["五月计划用水量"].ToString().Trim();
                    a[17] = reader["六月计划用水量"].ToString().Trim();
                    a[18] = reader["七月计划用水量"].ToString().Trim();
                    a[19] = reader["八月计划用水量"].ToString().Trim();
                    a[20] = reader["九月计划用水量"].ToString().Trim();
                    a[21] = reader["十月计划用水量"].ToString().Trim();
                    a[22] = reader["十一月计划用水量"].ToString().Trim();
                    a[23] = reader["十二月计划用水量"].ToString().Trim();

                }
                JavaScriptSerializer ser = new JavaScriptSerializer();
                String jsonStr = ser.Serialize(a);
                context.Response.Write(jsonStr);
                         笨拙的转数组的方法(后端C#)
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值