.net读取数据库表中数据在页面生成折线图
本人是查阅多人博客,反复比较调试,得到通俗易懂的方法和代码。请按以下步骤一步一步理解。
用html的img标签在页面上显示最后生成的折线图
在你需要展现折线图的aspx页面放置下面两行代码:(我大概介绍下数据库,一个小区的平均价在不同时间的价格不同)
<%string xqnames = Xqname;%> //xqnames是我在数据库中查找的字段条件:小区名称
//Xqname是我在页面后台代码定义的一个变量:public string Xqname = "";
<img src="show_linechart.aspx?xqm=<%=xqnames %>" id="show_pic" onclick="this.src='show_linechart.aspx?xqm='<%=xqnames %>"/>
获取了小区名后,通过img标签的src属性传递小区名到show_linechart.aspx页面。下面介绍show_linechart.aspx的页面和后台代码。
通过show_linechart.aspx页面读取数据,生成折线图
C#画布的坐标布局原理
//页面代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="show_linechart.aspx.cs" Inherits="AutomatedValuation.Jzpg.show_linechart" %>
//页面后台代码
using AutomatedValuation.MyDBClass;
using DocumentFormat.OpenXml.Packaging;
using System;
using System.Collections;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using ValuationBLL;//调用三层架构的业务逻辑层
using ValuationModel;//调用三层架构的model层
using Ajax;
using System.Data;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Windows.Forms;//引入窗体命名空间,支持窗体相关的类
namespace AutomatedValuation.Jzpg
{
public partial class show_linechart : System.Web.UI.Page
{
protected override void OnPreInit(EventArgs e)
{
base.OnPreInit(e);
this.newlinechart();
}
//获取小区名,生成折线图在页面上显示出来
public void newlinechart()
{
//获取传递的小区名值
string xqm = "";
xqm = Request.QueryString["xqm"];
if (xqm == "" || xqm == null)
return;
string VillageName = xqm;
string strChartName = VillageName + "价格趋势折线图";//折线图的标题名称
string yName = "价格";//纵坐标的名称
string xName = "时间";//横坐标的名称
int iyMaxValue = 14000;//纵坐标的最大值
double dyAveValue = 46.67;//14000/(360-60) 纵坐标的最大值/纵坐标的最大高度300
string xdbColumnName = "Time";//横坐标的数据在数据库中的字段名称
string ydbColumnName = "Xqjzj";//纵坐标的数据在数据库中的字段名称
Get_CurveData(VillageName, strChartName, yName, xName, iyMaxValue, dyAveValue, xdbColumnName, ydbColumnName, this.Context);
}
/// <summary>
/// 获取数据
/// strChartName:图名称;
/// yName:纵坐标名称;
/// xName:横坐标名称;
/// iyMaxValue:纵坐标最大值;为14000
/// dyAveValue:纵坐标单位值=(纵坐标最大值/纵坐标的最大高度300)
/// xdbColumnName:横坐标绑定显示数据表值的列名;
/// ydbColumnName:纵坐标绑定显示数据表值得列名;
/// </summary>
public void Get_CurveData(string VillageName, string strChartName, string yName, string xName, int iyMaxValue, double dyAveValue, string xdbColumnName, string ydbColumnName, HttpContext hl)
{
BasePriceBLL bll = new BasePriceBLL();//
BasePrice model = new BasePrice();