2013-03-06 120 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或集合。