制作网页图形
现在数据库中存有横坐标和纵坐标的值，我想调取数据库中的数据，然后以BS结构的形式，在网页中显示出一个这样的图形：“具有横坐标轴和纵坐标轴，并且横坐标和纵坐标的值都是来自于数据库中，这些横坐标和纵坐标所确定的点连接起来会形成一条曲线或者是直线。”我该怎么做呢？请各位大师指教啊！如果谁有类似的项目让我看一看啊！谢谢！
[解决办法]
function(x,y){
var canvas = document.getElementById( "cv ");
var context = canvas.getContext( "2d ");
context.beginPath();
context.lineTo(0,0);
context.moveTo(x,y);
context.stroke();
}
<canvas id= "cv "> </canvas>
[解决办法]
Chart
- HTML code
<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %><asp:Chart ID="chQxhz" runat="server" BackColor="211, 223, 240" BackGradientStyle="TopBottom" BorderColor="#B54001" BorderlineDashStyle="Solid" BorderWidth="2px" Height="300px" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)" Width="400px"> <Legends> <asp:Legend Docking="Bottom" Name="Legend1"> </asp:Legend> </Legends> <Titles> <asp:Title Font="Trebuchet MS, 12pt, style=Bold" ForeColor="26, 59, 105" ShadowColor="32, 0, 0, 0" ShadowOffset="3" Text="Chart"> </asp:Title> </Titles> <BorderSkin SkinStyle="Emboss" /> <Series> <asp:Series BorderColor="180, 26, 59, 105" BorderWidth="3" ChartType="Line" Color="220, 65, 140, 240" MarkerSize="8" MarkerStyle="Circle" Name="thirdfind" LegendText="C1" ShadowColor="Black" ShadowOffset="2" XValueType="Double" YValueType="Double" Legend="Legend1"> </asp:Series> <asp:Series BorderColor="180, 26, 59, 105" BorderWidth="3" ChartType="Line" Color="220, 224, 64, 10" MarkerSize="8" MarkerStyle="Circle" Name="selffind" LegendText="C2" ShadowColor="Black" ShadowOffset="2" XValueType="Double" YValueType="Double" Legend="Legend1"> </asp:Series> <asp:Series ChartArea="ChartArea1" ChartType="Line" Legend="Legend1" Name="ortherfind" LegendText="C3"> </asp:Series> <asp:Series ChartArea="ChartArea1" ChartType="Line" Legend="Legend1" Name="orther" LegendText="C4"> </asp:Series> </Series> <ChartAreas> <asp:ChartArea BackColor="OldLace" BackGradientStyle="TopBottom" BackSecondaryColor="White" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" Name="ChartArea1" ShadowColor="Transparent"> <Area3DStyle Inclination="40" IsClustered="False" IsRightAngleAxes="False" LightStyle="Realistic" Perspective="9" Rotation="25" WallWidth="3" /> <AxisY LineColor="64, 64, 64, 64"> <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" /> <MajorGrid LineColor="64, 64, 64, 64" /> </AxisY> <AxisX LineColor="64, 64, 64, 64"> <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" /> <MajorGrid LineColor="64, 64, 64, 64" /> </AxisX> </asp:ChartArea> </ChartAreas> </asp:Chart>
[解决办法]
上面的代码是用对应的是.net 4的版本， 2008下面建议去看看这个
http://archive.msdn.microsoft.com/mschart/Release/ProjectReleases.aspx?ReleaseId=1591
至于如何连接数据库调取数据，在网上搜一下ado.net就可以找到很多的例子和教程。
[解决办法]
如果在vs2008 ，vs2008中不带Chart图表控件，微软发布的vs2010中就带有Chart图表控件，封装在工具中，可以跟其他的控件一样，拖到页面就可以了。vs2008中使用 就需要安装相关的插件包，好像有3个，刚在电脑里面找了下没看到有，明天去公司 ，公司电脑肯定有的 到时候再告诉你是哪几个插件。
这是我做的一个 统计图表的 可根据条件进行图表的变化。
cs code
public void CharBind()
{
Random rnd = new Random();//随机数对象
int[] mm1 = new int[13] { 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 };//作为横坐标 月份
Series series = new Series("统计");
series.IsValueShownAsLabel = true;
series.BorderWidth = 4;
series.ChartType = SeriesChartType.Line;//图表是 线型样式
series.YValueType = ChartValueType.Auto;
series.ChartArea = "ChartArea1";
series.YAxisType = AxisType.Secondary;//左侧
series.ChartType = SeriesChartType.StackedColumn;//series叠加
Chart1.ChartAreas[0].Area3DStyle.Enable3D = true;//是否启用3D 效果
series.Color = Color.FromArgb(rnd.Next() % (255 - 0 + 1) + 0, //随即取色
rnd.Next() % (255 - 0 + 1) + 0,
rnd.Next() % (255 - 0 + 1) + 0);
string PojectType = ViewState["where"].ToString();
series.LegendText = PojectType.ToString();
for (int t = 1; t < mm1.Length; t++)
{ series.Points.AddXY(mm1[t].ToString(),GetTotal(Convert.ToInt32(mm1[t].ToString())));//纵坐标数据来源于 GetTotal函数
series.ToolTip = PojectType + "项目 " + "#VALX" + "月份参加的单位数有：" + " #VALY " + "家";//VALX表示X值 ,VAL{C}表示Y值
}
Chart1.Series.Add(series);
}
//获取相关条件的数据 我这里传入的是月份 ，月份的值来自 前面定义的数组。
public int GetTotal(int num)
{
string sql = "";
SQLHelperLib.SQLHelper sh = new SQLHelperLib.SQLHelper();
if (ViewState["where"] != "")
{
sql = " select COUNT(CName) as counts from QryTblContractDetailsTotal where Ctype='" + ViewState["where"].ToString() + "' and ContractDateSign='" + num + "' group by ContractDateSign";
}
int numt = Convert.ToInt32(sh.ExecScalar(sql));
return numt;
}
html code
<asp:Chart ID="Chart1" runat="server" Height="600px" Width="1120px">
<Titles>
<asp:Title ShadowColor="32,0,0,0" Font="Trubuchet MS,14.25pt,style=Bold" Text="统计" ShadowOffset="3" Alignment="TopCenter" ForeColor="25,59,105"></asp:Title>
</Titles>
<Legends>
<asp:Legend IsTextAutoFit="false" Name="Default" BackColor="Transparent" Font="Trebuchet MS,8.25pt,style=Bold" />
</Legends>
<BorderSkin SkinStyle="FrameTitle3" BackImageAlignment="Center" BackColor="LightGray" BorderColor="LightGray" />
<series>
<%-- <asp:Series ChartType="StackedColumn" ChartArea="ChartArea1"
Name="SeriesName1" ShadowColor="64,0,0,0" BorderColor="180,26,59,105">
</asp:Series>--%>
</series>
<chartareas>
<asp:ChartArea Name="ChartArea1">
<AxisX IntervalAutoMode="VariableCount" IsStartedFromZero="False" ToolTip ="横坐标表示月份" Title="单位(月)">
<LabelStyle IsStaggered="true" />
<MajorGrid LineWidth="0" />
</AxisX>
<AxisY Enabled ="True" Title ="单位(个)" TitleAlignment="Far" ToolTip="左纵坐标表示人数" IsStartedFromZero="true">
<LabelStyle Font="Trebuchet MS,7.25pt,style=Bold"/>
<MajorGrid LineWidth="0" />
</AxisY>
<AxisY2 Enabled ="True" Title="单位[个]" TitleAlignment="Near" ToolTip="右纵坐标表示单位个数" IsStartedFromZero="False">
<LabelStyle Font="Trebuchet MS,7.25pt,style=Bold" />
<MajorGrid LineWidth="0" />
</AxisY2>
</asp:ChartArea>
</chartareas>
</asp:Chart>
[解决办法]
用 Graphics类的 FillRectangle 方法和 DrawRectangle 方法绘制柱形图。
我也正准备学。