2013-03-06 122 views
0

大家好! 我正在設計一個從數據庫表的柱形圖..現在我需要圖表的每個列(酒吧)有不同的顏色,以便我們可以有不同的傳說,但我無法實現it.Here是我的C#代碼.. ..如何在asp.net中的柱狀圖中更改條的顏色

string conn = "Server=localhost;Port=3306;Database=dma;UID=root;Pwd=techsoft;pooling=false"; 
    MySqlDataAdapter adp = new MySqlDataAdapter("select ConfID,NoOfCalls from chart1", conn); 
    DataSet ds = new DataSet(); 
    adp.Fill(ds); 

    //2.Set the style/Settings for X and Y axis 
    Chart1.Font.Size = FontUnit.Medium; 
    Chart1.Series["Series1"].XValueType = ChartValueType.Int32; 
    Chart1.Series["Series1"].YValueType = ChartValueType.Int32; 
    Chart1.ChartAreas[0].AxisY.Title = "No. Of calls"; 
    Chart1.ChartAreas[0].AxisX.Title = "ConferenceId"; 


    //3.Define the chart type 
    Chart1.Series["Series1"].ChartType = SeriesChartType.Column; 
    //4.Add the actual values from the dataset to X & Y co-ordinates 
    for (int i = 0; i < ds.Tables[0].Rows.Count; i++) 
    { 
     Chart1.Series["Series1"].Points.AddXY(ds.Tables[0].Rows[i]["ConfID"], ds.Tables[0].Rows[i]["NoOfCalls"]); 
    } 

這裏是我的圖表aspx頁面代碼...

<asp:Chart id="Chart1" runat="server" Width="572px" Height="339px" 
    BorderDashStyle="Solid" BorderWidth="2px" BorderColor="#B54001" 
    onload="Chart1_Load1"> 
    <Legends> 
     <asp:Legend Name="Legend1"> 
     </asp:Legend> 
    </Legends> 
<BorderSkin SkinStyle="None" BackGradientStyle="None" BackSecondaryColor="SeaShell" BorderColor="#6198dc"  BorderDashStyle="Solid" BorderWidth="1" BackColor="White"></BorderSkin>  
    <Series> 
     <asp:Series MarkerSize="3" BackGradientStyle="HorizontalCenter" BorderWidth="1" 
      Name="Series1" MarkerStyle="Circle" BorderColor="180, 26, 59, 105" 
      Color="220, 65, 140, 240"     ShadowOffset="0" Legend="Legend1"></asp:Series> 
    </Series> 

    <ChartAreas> 
     <asp:ChartArea Name="ChartArea1" BorderWidth="0" BackColor="White" ShadowColor="Transparent"> 
      <AxisY LineColor="64, 220, 64, 64" LineDashStyle="Solid" LineWidth="2"> 
         <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" /> 
         <MajorGrid LineColor="64, 220, 64, 64" /> 
       </AxisY> 
       <AxisX LineColor="64, 220, 64, 64" LineDashStyle="Solid" LineWidth="2"> 
         <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold" /> 
         <MajorGrid LineColor="64, 220, 64, 64" /> 
       </AxisX> 
      </asp:ChartArea> 
    </ChartAreas> 

PLZ傢伙幫助me.Thanx提前..

回答

0

你可以添加顏色和其他樣式到圖表的任何元素與ASP.net圖表使用模板的

ChartObject.LoadTemplate("templatefile.xml"); 

在這裏找到更多的細節

Styling ASP.Net Chart with Template

Styyling Charts

+0

thnx sir for ur response.where我將得到templatefile.xml – vikas 2013-03-06 10:53:30

+0

檢查鏈接http://forums.asp.net/t/1652185.aspx/1?Styling%20a%20chart ..在這裏你可以檢查分配給變量「藍」和「紅」的模板文件。你可以將它保存到xml formate的項目中。 – 2013-03-06 10:55:35

+0

先生我用aspx文件代碼更新了我的代碼Plz看看。謝謝 – vikas 2013-03-06 10:57:16

3

有超級簡單的方法來定製您的條形圖在asp.net中。

您可以通過xml模板或直接通過代碼加載樣式。

代碼隱藏:

protected void Page_Load(object sender, EventArgs e) 
{ 
     DataTable dt = default(DataTable); 
     dt = MyChartDataSource(); //datasource for your chart 

    //Give two columns of data to Y-axle 
     Chart1.Series[0].YValueMembers = "Volume1"; 
     Chart1.Series[1].YValueMembers = "Volume2"; 

     //Set the X-axle as date value 
     Chart1.Series[0].XValueMember = "Date"; 

     //Bind the Chart control with the setting above 
     Chart1.DataSource = dt; 
     Chart1.DataBind(); 

     //after databinding your chart, override the colors of bar as below: 
     Random random = new Random(); 
     foreach (var item in Chart1.Series[0].Points) 
     { 
      Color c = Color.FromArgb(random.Next(0, 255), random.Next(0, 255), random.Next(0, 255)); 
      item.Color = c; 
     } 
} 

和你的設計師:

<asp:Chart ID="Chart1" runat="server" Height="400px" Width="500px"> 
      <Series> 
       <asp:Series Name="Series1" ChartType="Column" ChartArea="ChartArea1"> 
       </asp:Series> 
       <asp:Series Name="Series2" ChartType="Column" ChartArea="ChartArea1"> 
       </asp:Series> 
      </Series> 
      <ChartAreas> 
       <asp:ChartArea Name="ChartArea1"> 
       </asp:ChartArea> 
      </ChartAreas> 
</asp:Chart> 

。我已經綁定了圖表,並從代碼隱藏的角度定義了它的系列,您可以通過設計師完全做到這一點,但幾乎沒有什麼區別。

注意:MyChartDataSource()返回要綁定圖表的列表或DataTable或dataSet或集合。