1打g工vs开发工具,新建一个web项目,然后再新建一个文件。2然后打开工具栏,拖动chart。3绘制如下图所示的页面。详细代码如下:<%@ reg**ter assembly="teechart" namespace="steema.teechart.web" tagprefix="tchart" %><!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head id="head1" runat="server"> <title></title> <link rel="stylesheet" type="text/css" href="../css/base.css" /> <link rel="stylesheet" type="text/css" href="../css/main.css" /> <script type="text/j**ascript" src="../js/jquery1.8.2.min.js"></script> <style type="text/css"> #updatepanel1 h2 { height: 39px; line-height: 39px; padding-top: 14px; padding-left: 18px; background: #eeab38; } </style> <script language="j**ascript" type="text/j**ascript"> function currentstyle(obj) { var objli = $("#" + obj); $("li").removeclass("current"); $(objli).addclass("current"); // $(obj).addclass("background-color", "red"); } </script></head><body> <form id="form2" runat="server"> <div class="homewarpbox"> <h2> <img src="../images/tit02.gif" alt="行情报价" title="行情报价" /></h2> <div class="glodinvest"> <div class="glodinvest_itab" style="width: 675px"> <ul> <li id="au"> <asp:button id="btnau" onclick="btnau_click" runat="server" text="黄金" style="background: none;" /> </li> <li id="ag"> <asp:button id="btnag" onclick="btnag_click" runat="server" text="白银" style="background: none;" /> </li> <li id="pt"> <asp:button id="btnpt" onclick="btnpt_click" runat="server" text="铂金" style="background: none;" /> </li> <li id="pd"> <asp:button id="btnpd" onclick="btnpd_click" runat="server" text="钯金" style="background: none;" /> </li> <li id="copper"> <asp:button id="btncopper" onclick="btncopper_click" runat="server" text="铜" style="background: none;" /> </li> <li id="uk"> <asp:button id="btnuk" onclick="btnuk_click" runat="server" text="原油" style="background: none;" /> </li> <li id="eu"> <asp:button id="btneu" onclick="btneu_click" runat="server" text="eurusd" style="background: none;" /> </li> <li id="gb"> <asp:button id="btngb" onclick="btngb_click" runat="server" text="gbpusd" style="background: none;" /> </li> <li id="eur"> <asp:button id="btneur" onclick="btneur_click" runat="server" text="eurgbp" style="background: none;" /> </li> <li id="us"> <asp:button id="btnus" onclick="btnus_click" runat="server" text="usdjpy" style="background: none;" /> </li> <li style="width: 65px" id="usd"> <asp:button id="btnusd" onclick="btnusd_click" runat="server" text="usdchf" style="background: none;" /> </li> </ul> </div> <div class="k_pai"> <asp:chart id="cpu" runat="server" width="718px" height="307" enableviewstate="true" backcolor="transparent" backgradientstyle="center" backimagewrapmode="scaled" backsecondarycolor="peachpuff" borderlinewidth="0" borderlinedashstyle="dashdot"> <series> <asp:series borderwidth="2" name="spu" shadowcolor="black" **v**ibleinlegend="false" xvaluetype="datetime" yvaluesperpoint="4" yvaluetype="double" charttype="candlestick"> </asp:series> </series> <chartareas> <asp:chartarea name="default" backcolor="254,221,191"> <ax**y **startedfromzero="false" linecolor="black"> <majorgrid enabled="false" /> </ax**y> <ax**x enabled="true" linecolor="black"> <majorgrid linecolor="transparent" /> <minorgrid linecolor="transparent" enabled="false" /> <minortickmark interval="notset" linecolor="black" /> <scalebreakstyle linecolor="transparent" /> </ax**x> </asp:chartarea> </chartareas> </asp:chart> </div> </div> </div> </form></body></html>4设置控控件属性。 <asp:chart id="cpu" runat="server" width="718px" height="307" enableviewstate="true" backcolor="transparent" backgradientstyle="center" backimagewrapmode="scaled" backsecondarycolor="peachpuff" borderlinewidth="0" borderlinedashstyle="dashdot"> <series> <asp:series borderwidth="2" name="spu" shadowcolor="black" **v**ibleinlegend="false" xvaluetype="datetime" yvaluesperpoint="4" yvaluetype="double" charttype="candlestick"> </asp:series> </series> <chartareas> <asp:chartarea name="default" backcolor="254,221,191"> <ax**y **startedfromzero="false" linecolor="black"> <majorgrid enabled="false" /> </ax**y> <ax**x enabled="true" linecolor="black"> <majorgrid linecolor="transparent" /> <minorgrid linecolor="transparent" enabled="false" /> <minortickmark interval="notset" linecolor="black" /> <scalebreakstyle linecolor="transparent" /> </ax**x> </asp:chartarea> </chartareas> </asp:chart>5增加后台相关代码6导入命名空间7增加控件处理方法8后台详细代码如下:using system;using system.collections;using system.componentmodel;using system.data;using system.drawing;using system.web;using system.web.sessionstate;using system.web.ui;using system.web.ui.webcontrols;using system.web.ui.htmlcontrols;using system.web.ui.dat****ualization.charting;using cms.bll;namespace cms.web.admin{ public partial class productk : system.web.ui.page { protected void page_load(object sender, eventargs e) { if (!th**.**postback) { pagerefresh("xauusd"); } } #region protected void btnau_click(object sender, eventargs e) { pagerefresh("xauusd"); clientscript.reg**terstartupscript(gettype(), "", "<script>currentstyle('au');</script>"); } protected void btnag_click(object sender, eventargs e) { pagerefresh("xagusd"); clientscript.reg**terstartupscript(gettype(), "", "<script>currentstyle('ag');</script>"); } protected void btnpt_click(object sender, eventargs e) { pagerefresh("xptusd"); clientscript.reg**terstartupscript(gettype(), "", "<script>currentstyle('pt');</script>"); } protected void btnpd_click(object sender, eventargs e) { pagerefresh("xpdusd"); clientscript.reg**terstartupscript(gettype(), "", "<script>currentstyle('pd');</script>"); } protected void btncopper_click(object sender, eventargs e) { pagerefresh("copper"); clientscript.reg**terstartupscript(gettype(), "", "<script>currentstyle('copper');</script>"); } protected void btnuk_click(object sender, eventargs e) { pagerefresh("ukoil"); clientscript.reg**terstartupscript(gettype(), "", "<script>currentstyle('uk');</script>"); } protected void btneu_click(object sender, eventargs e) { pagerefresh("eurusd"); clientscript.reg**terstartupscript(gettype(), "", "<script>currentstyle('eu');</script>"); } protected void btngb_click(object sender, eventargs e) { pagerefresh("gbpusd"); clientscript.reg**terstartupscript(gettype(), "", "<script>currentstyle('gb');</script>"); } protected void btneur_click(object sender, eventargs e) { pagerefresh("eurgbp"); clientscript.reg**terstartupscript(gettype(), "", "<script>currentstyle('eur');</script>"); } protected void btnus_click(object sender, eventargs e) { pagerefresh("usdjpy"); clientscript.reg**terstartupscript(gettype(), "", "<script>currentstyle('us');</script>"); } protected void btnusd_click(object sender, eventargs e) { pagerefresh("usdchf"); clientscript.reg**terstartupscript(gettype(), "", "<script>currentstyle('usd');</script>"); } #endregion private void pagerefresh(string type) { th**.cpu.viewstatecontent = serializationcontents.all; th**.cpu.enableviewstate = false; series series = cpu.series[0]; th**.fillstockdata(series, type); if (type == "eurgbp" ||type == "eurusd" || type == "usdchf" || type == "eurusd") { th**.cpu.chartareas[0].ax**y.labelstyle.format = "f4"; } else if (type == "gbpusd") { th**.cpu.chartareas[0].ax**y.labelstyle.format = "f2"; } else if (type == "usdjpy") { th**.cpu.chartareas[0].ax**y.labelstyle.format = "f3"; } else { th**.cpu.chartareas[0].ax**y.labelstyle.format = "f"; } th**.cpu.chartareas[0].ax**x.labelstyle.format = "mm-dd"; th**.cpu.chartareas[0].ax**x.labelstyle.**endlabelv**ible = false; th**.cpu.chartareas[0].ax**x.**marksnexttoax** = false; th**.cpu.chartareas[0].ax**y.labelstyle.**endlabelv**ible = false; series.borderwidth =1; series.shadowoffset = 1; // series.backsecondarycolor = color.red; series.color = color.green; th**.cpu.chartareas[0].ax**x.interval = 3; cpu.chartareas[0].ax**x.linewidth =1; } /// <summary> /// /// </summary> /// <param name="series"></param> /// <param name="period"></param> /// <param name="high"高></param> /// <param name="firstday">开始日期</param> /// <param name="type">类别</param> private void fillstockdata(series series, string type) { datatable dt = new productprice().getproducttypel**t(type); sproduct.tradeclient trade = new sproduct.tradeclient(); char splitstr = '\t'; string[] price = **; string day = string.empty; int i = 0; datetime date = datetime.now; for (int n = dt.rows.count - 1; n >= 0; n--) { day = dt.rows[n]["weektime"].tostring().substring(4, 4); day= day.insert(2, "-"); series.points.addxy(day, convert.todouble(dt.rows[n]["highprice"])); series.points[i].yvalues[1] = convert.todouble(dt.rows[n]["lowprice"]); series.points[i].yvalues[2] = convert.todouble(dt.rows[n]["openprice"]); series.points[i].yvalues[3] = convert.todouble(dt.rows[n]["closeprice"]); i = i + 1; } try { price = trade.getlastpillardata("d1", type).split(splitstr); // series.points[i].xvalue = cpu.series[0].points[i - 1].xvalue + 1; // 周期 \t 行情编码 \t 时间(yyyymmddhhmm) \t开盘价 \t最高价 \t最低价\t 收盘价\t成交量 day = price[2].substring(4, 4); day = day.insert(2, "-"); series.points.addxy(day, convert.todouble(price[4]));//dt.rows[n]["highprice"])); series.points[i].yvalues[1] = convert.todouble(price[5]);// dt.rows[n]["lowprice"]); series.points[i].yvalues[2] = convert.todouble(price[3]);//dt.rows[n]["openprice"]); series.points[i].yvalues[3] = convert.todouble(price[6]);//dt.rows[n]["closeprice"]); } catch { } } }}9运行程序end 20210311