Question

大家好！我正在从数据库表中设计一个柱形图。现在我需要图表的每个列（条形图）具有不同的颜色，以便我们可以有不同的图例，但我无法实现它。这是我的c＃代码...

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家伙帮帮我。提前谢谢..

Answer 1

有一种超级简单的方法可以在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或要绑定图表的集合。

Answer 2

您可以使用ASP.net图表中的模板为图表的任何元素添加颜色和其他样式

ChartObject.LoadTemplate("templatefile.xml");

在此处查找更多详情

<强> Styling ASP.Net Chart with Template

<强> Styyling Charts

如何更改asp.net中柱形图中条形的颜色

2 个答案: