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#)