如何将背景色添加到图表中的列 [英] How to add background color to columns in chart

问题描述

我有一个chart，类型为columns.如何为Y轴添加背景颜色?像这张图中的灰色?这可能吗?我正在将Chart Control用于Visual Studio 2015中的Winforms.我的数据来自SQL.

I have a chart with type columns. How will I add a background color to the Y Axis? like the gray color in this graph? Is this possible? I am using Chart Control for Winforms from Visual Studio 2015. My data is from SQL.

用于填充图表的代码:

chart1.DataSource = dtSalesChart;

foreach (DataRow row in dtSalesChart.Rows)
{
   Series S = new Series(row["Period"].ToString());
   chart1.Series.Add(S);
}

for (int j = 1; j < dtSalesChart.Columns.Count; j++)
  {
    for (int i = 0; i < dtSalesChart.Rows.Count; i++)
      {                            
      chart1.Series[i].Points.AddXY(dtSalesChart.Columns[j].ColumnName, 
      dtSalesChart.Rows[i][j].ToString());
       }
  }

  chart1.Series[0].Color = Color.FromArgb(15, 130, 154);
  chart1.Series[1].Color = Color.FromArgb(117, 193, 205);
  Title title = chart1.Titles.Add("ChartTitle");                 
  title.Text = "Sales By Month";
  title.Font = new Font("Tahoma", 12, FontStyle.Bold);
  title.ForeColor = Color.FromArgb(32, 77, 137);

  chart1.ChartAreas["ChartArea1"].AxisX.Interval = 1;
  chart1.ChartAreas["ChartArea1"].AxisX.MajorGrid.LineColor = Color.White;
  chart1.ChartAreas["ChartArea1"].AxisY.MajorGrid.LineColor = Color.WhiteSmoke;                                        
  chart1.DataBind();

当前图表:

我想在Y轴上添加灰色背景，如下所示:

I want to add the gray background in the Y Axis like below :

推荐答案

对灰色列进行短暂的绘制(这很难使它正确)，我看到了两个选择:

Short of painting the gray columns, (which is painfully hard to get right) I see two options:

• 您可以使用 SeriesChartType.StackedColumn
• 您可以叠加两个ChartAreas以获得设计效果.

• You can use SeriesChartType.StackedColumn
• You can overlay two ChartAreas to get the designed effect.

这是使用StackedColumn的解决方案.

Here is a solution that uses StackedColumn.

您需要做一些事情才能使其正常工作:

You need to do a few things to make it work:

• 您需要知道灰色列应该走多远的y值(最大值).

• You need to know the y value (max) of how far the grey columns should go.

您需要为它们添加一个虚拟系列.

You need to add a dummy series for them.

您需要将所有系列设置为StackedColumn

您需要设置特殊属性 StackedGroupName ，以便要堆叠的系列具有相同的名称.

You need to set the special property StackedGroupName so that the series you want to be stacked have the same name.

这里是一个例子:

这是代码:

chart3.Series.Clear();
Series s1 = chart3.Series.Add("S1");
s1.ChartType = SeriesChartType.StackedColumn;
Series s2 = chart3.Series.Add("S2");
s2.ChartType = SeriesChartType.StackedColumn;

Series s0 = chart3.Series.Add("S0");
s0.ChartType = SeriesChartType.StackedColumn;
s0.Color = Color.LightGray;
s0.IsVisibleInLegend = false;

s0["StackedGroupName"] = "Group1";
s1["StackedGroupName"] = "Group1";
s2["StackedGroupName"] = "Group2";

for (int j = 0; j < data.Columns.Count; j++)
{
    for (int i = 0; i < data.Rows.Count; i++)
    {
        double vy = Convert.ToDouble(data.Rows[i][j].ToString());
        chart3.Series[i].Points.AddXY(j, vy);
        if (i==0)  s0.Points.AddXY(j, 800 - vy);
    }
}
List<string> mn = new List<string>() { "J", "F", "M", "A" };
for (int i = 0; i < s0.Points.Count; i++)
{
    s0.Points[i].AxisLabel = mn[i];
}

更多注意事项:

• 要使堆栈起作用，列需要具有数字个x值.确保将您的代码更改为一些有用的值！

• For stacking to work the columns need to have numeric x-values. Make sure to change your code to some useful values!!

我只是简单地获取了循环索引，然后添加了标签.您也可能需要一个月的时间，并使用合适的DateTime格式.我还调整了循环以适合我的桌子布局

I simply took the loop index and added labels afterwards. You could also take a month and use a suitable DateTime format. I have also adapted the loop to fit my table layout

我没有添加任何其他样式，也没有使用任何数据绑定.不确定该行在您的代码中意味着什么.

I didn't add any other styling and I have not used any data binding. Not sure what that line means in your code.

伪Series s0获取从max - yvalue计算出的伪值.

The dummy Series s0 gets dummy values calculated from a max - yvalue.

我信任自己的价值观，并在没有TryParse的情况下做了Convert.选择你的方式！

I trusted my values and did a Convert without TryParse. Pick your way!

第二个系列s2不在任何其他系列的堆叠组中，因此它是独立的.

The 2nd series s2 is not not in a stacking group with any other series, so it stands alone.

图例中系列的顺序相反，以使它们看起来像堆栈.您可以根据需要颠倒添加它们的顺序.

The order of the series in the legend is reversed to make them look like the stacks. You can reverse the order in which you add them if you like..

您可能想研究这篇文章讨论了一些常见的堆叠问题.

You may want to study this post which dicusses a few common issues with stacking.

您的另一个选择是精确重叠两个图表区域，并设置它们的点和颜色，以使组合的效果看起来像您的图像. 此处是一个覆盖两个饼图的示例一样的图表.

Your other option would be to overlay two chartareas precisely and set their points and their colors so that the combined effect looks like your image. Here is an example that overlays two pie-like charts..

这篇关于如何将背景色添加到图表中的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！