2013-02-14 127 views
4
<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页面中编写的。数据绑定到图表。asp.net中的图表控制中的绘制条和折线图

如何编写折线图的代码。确保值从database.how绑定从sql server到折线图的值。

回答

5

我想你需要两个系列应结合图表如果所以我把下面的代码

在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(); 
0

的代码非常简单:

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和绑定,为图表,然后选择用同样的方式XValueMemberYValueMembers为点你之前已经做了:

<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"; 
0

你可以做到这一点简单先,然后去多个系列。

网页代码背后:

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>