[英]draw bar and line charts in chart control in asp.net
<asp:Chart ID="chartSellThru" runat="server" Height="400px" Width="1200px" >
<Series>
<asp:Series Name="ActualsQTD">
</asp:Series>
<asp:Series Name="ForecastQTD">
</asp:Series>
<asp:Series Name="QTDRatio" ChartType="Line">
</asp:Series>
<asp:Series Name="TargetAttain" ChartType="Line">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="SellThruChartArea">
</asp:ChartArea>
</ChartAreas>
chartSellThru.Series["ActualsQTD"].XValueMember = "ProductGroup";
chartSellThru.Series["ActualsQTD"].YValueMembers = "ActualsQTD";
我在default.aspx頁面上寫了上面的代碼行,最后兩行代碼寫在default.aspx.cs頁面中。 數據綁定到圖表。
如何編寫折線圖的代碼。 確保從database.how綁定值以將值從sql server綁定到折線圖。
我認為你需要兩個系列應該綁定到圖表,如果是這樣我放置下面的代碼
在aspx頁面中
<asp:Chart ID="ChartDemo" runat="server" Height="400px" Width="1200px">
<Series>
<asp:Series Name="ActualsQTD">
</asp:Series>
<asp:Series Name="ForecastQTD">
</asp:Series>
<asp:Series Name="QTDAttainMent">
</asp:Series>
<asp:Series Name="QTDRatio">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="SellThruChartArea">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
並在aspx.cs頁面中
DataSet ds = new DataSet();
ds = SrcObj.GetSellThruChartData(ddlFiscalMonth.SelectedValue.ToString(), ddlReportWeek.SelectedValue.ToString(), ddlArea.SelectedValue.ToString());
//Column Chart
ChartDemo.Series["ActualsQTD"].ChartType = SeriesChartType.Column;
ChartDemo.Series["ActualsQTD"]["PointWidth"] = "0.9";
ChartDemo.Series["ActualsQTD"]["BarLabelStyle"] = "Center";
ChartDemo.Series["ActualsQTD"]["PixelPointDepth"] = "99";
ChartDemo.Series["ActualsQTD"]["DrawingStyle"] = "Cylinder";
ChartDemo.Series["ForecastQTD"].ChartType = SeriesChartType.Column;
ChartDemo.Series["ForecastQTD"]["PointWidth"] = "0.9";
ChartDemo.Series["ForecastQTD"]["BarLabelStyle"] = "Center";
ChartDemo.Series["ForecastQTD"]["PixelPointDepth"] = "99";
ChartDemo.Series["ForecastQTD"]["DrawingStyle"] = "Cylinder";
ChartDemo.ChartAreas["SellThruChartArea"].AxisX.Interval = 1;
ChartDemo.ChartAreas["SellThruChartArea"].AxisX.MajorGrid.Enabled = false;
//ChartDemo.ChartAreas["SellThruChartArea"].AxisY.MajorGrid.Enabled = false;
ChartDemo.Series["ActualsQTD"].XValueMember = "ProductGroup";
ChartDemo.Series["ActualsQTD"].YValueMembers = "ActualsQTD";
ChartDemo.Series["ForecastQTD"].XValueMember = "";
ChartDemo.Series["ForecastQTD"].YValueMembers = "ForecastQTD";
ChartDemo.Series["ActualsQTD"].IsValueShownAsLabel = true;
ChartDemo.Series["ForecastQTD"].IsValueShownAsLabel = true;
//Line Chart
ChartDemo.Series["QTDAttainMent"].ChartType = SeriesChartType.Line;
ChartDemo.Series["QTDRatio"].ChartType = SeriesChartType.Line;
ChartDemo.Series["QTDAttainMent"].XValueMember = "";
ChartDemo.Series["QTDAttainMent"].YValueMembers = "QTDAttainMent";
ChartDemo.Series["QTDRatio"].XValueMember = "";
ChartDemo.Series["QTDRatio"].YValueMembers = "QTDRatio";
ChartDemo.Series["QTDAttainMent"].IsValueShownAsLabel = true;
ChartDemo.Series["QTDRatio"].IsValueShownAsLabel = true;
ChartDemo.Series["QTDAttainMent"].BorderWidth = 3;
ChartDemo.Series["QTDAttainMent"].Color = Color.Green;
ChartDemo.Series["QTDRatio"].BorderWidth = 3;
ChartDemo.Series["QTDRatio"].Color = Color.Red;
ChartDemo.Series["QTDAttainMent"].YAxisType = AxisType.Secondary;
ChartDemo.Series["QTDRatio"].YAxisType= AxisType.Secondary;
ChartDemo.DataSource = ds;
ChartDemo.DataBind();
代碼非常簡單:
using (SqlConnection conn = new SqlConnection("OMG look a connection string"))
{
using (SqlCommand cmd = new SqlCommand("SELECT xValue, yValue FROM chartPoints"))
{
try
{
conn.Open()
using (SqlDataReader rdr = cmd.ExecuteReader())
{
chartSellThru.Series["QTDRatio"].Points.DataBindXY(rdr, "xValue", rdr, "yValue");
}
}
catch(Exception ex)
{
//handle errors
}
}
}
您還可以將此命令設置為SqlDataSource
的SelectCommand
並將其綁定到圖表,然后使用與XValueMember
相同的方式選擇具有XValueMember
和YValueMembers
的點:
<asp:SqlDataSource runat="server" ID="dsLinePoints" ConnectionString="OMG look a connection string" SelectCommand="SELECT xValue, yValue FROM chartPoints" />
<asp:Chart ID="chartSellThru" runat="server" Height="400px" Width="1200px" DataSourceID="dsLinePoints">
<Series>
<asp:Series Name="ActualsQTD">
</asp:Series>
<asp:Series Name="ForecastQTD">
</asp:Series>
<asp:Series Name="QTDRatio" ChartType="Line">
</asp:Series>
<asp:Series Name="TargetAttain" ChartType="Line">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="SellThruChartArea">
</asp:ChartArea>
</ChartAreas>
</asp:Chart>
chartSellThru.Series["QTDRatio"].XValueMember = "xValue";
chartSellThru.Series["QTDRatio"].YValueMembers = "yValue";
你可以先做簡單然后去多個系列。
代碼背后的頁面:
Values[]={10,20,30,40,50}
weekworkline1.Series.Add(new AjaxControlToolkit.LineChartSeries { Data = values, LineColor = "#2fd1f9", Name = "Working Hours" });
Aspx代碼:
<asp:LineChart ID="weekworkline1" runat="server" ChartHeight="300" ChartWidth="900" ChartType="Stacked"></asp:LineChart>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.