图表控制两个数据集栏重叠

时间:2012-07-11 15:05:30

标签: .net vb.net charts microsoft-chart-controls

我正在开发一个ASP.NET项目,我有一个条形图,其中包含两个数据集。我如何让他们超过一圈。

一项数据是坦克大小,另一项是当前级别。

3 个答案:

答案 0 :(得分:1)

<asp:Series ChartArea="ChartArea1" Font="MS Mincho, 8pt, style=Bold" 
            Legend="Legend1" Name="Tank Size" XValueMember="Serial" 
            YValueMembers="DeviceSize" ChartType="StackedColumn">
        </asp:Series>
        <asp:Series Legend="Legend1" Name="Current Level" XValueMember="Serial" 
            YValueMembers="DeviceLevel" YValuesPerPoint="2" 
            Font="Mangal, 8pt, style=Bold" ChartType="Column">

我更改为其中一个条形图上的ChartType和一个堆叠 - 这可能是一种肮脏的方式,但我的工作。这就是我关心的一切。

答案 1 :(得分:0)

您可以使用PointWidth Custom属性

chartObj.Series[0]["PointWidth"] = "1.3";

答案 2 :(得分:0)

构建上述StackedColumn解决方案。如果您不希望列完全重叠,而只是想要部分重叠。你可以生成第三个系列,其中两个系列将是ChartType =&#34; Column&#34;一个将是&#34; StackedColumn&#34;。

ChartType Column的第二个系列至少需要一个点,但是将该点设置为Y值,因此它不显示;这个系列将有把另一个系列推到一边的效果。

    Chart chrt = new Chart();
    chrt.ChartAreas.Add("ChartArea");

    // The series in back
    Series chrtS = new Series();
    chrtS.Points.Add(new DataPoint(2, 3));
    chrtS.Points.Add(new DataPoint(3, 4));
    chrtS.Points.Add(new DataPoint(4, 5));
    chrtS.ChartType = SeriesChartType.Column;
    chrtS.Color = System.Drawing.Color.Blue;
    chrtS["PointWidth"] = ".5";
    chrt.Series.Add(chrtS);

    // The series invisibly pushing the one above over
    Series chrtS1 = new Series();
    chrtS1.Points.Add(new DataPoint(2, 0));
    chrtS1.ChartType = SeriesChartType.Column;
    chrtS1.Color = System.Drawing.Color.Green;
    chrtS1["PointWidth"] = ".5";
    chrt.Series.Add(chrtS1);

    // The series stacked on top
    Series chrtS2 = new Series();
    chrtS2.Points.Add(new DataPoint(2, 4));
    chrtS2.Points.Add(new DataPoint(3, 3));
    chrtS2.Points.Add(new DataPoint(4, 2));
    chrtS2.ChartType = SeriesChartType.StackedColumn;
    chrtS2.Color = System.Drawing.Color.Red;
    chrtS2["PointWidth"] = ".25";
    chrt.Series.Add(chrtS2);

自发布代码以来,我已经更改了图片的值,但它会给你一个最终结果:

enter image description here


如果您需要对标签进行更详细的控制,或者条形图相互滑动的距离,那么您可以使用图表区域来实现这一目标。

    Chart chrt = new Chart();
    chrt.ChartAreas.Add("ChartAreaRed");
    chrt.ChartAreas["ChartAreaRed"].BackColor = System.Drawing.Color.Transparent;
    chrt.ChartAreas["ChartAreaRed"].Position.Height = 100;
    chrt.ChartAreas["ChartAreaRed"].Position.Width = 100;
    chrt.ChartAreas["ChartAreaRed"].InnerPlotPosition.Height = 90;
    chrt.ChartAreas["ChartAreaRed"].InnerPlotPosition.Width = 80;
    chrt.ChartAreas["ChartAreaRed"].InnerPlotPosition.X = 10;
    chrt.ChartAreas["ChartAreaRed"].AxisY.Maximum = 6;
    chrt.ChartAreas["ChartAreaRed"].AxisX.Maximum = 5;
    chrt.ChartAreas["ChartAreaRed"].AxisX.Interval = 1;
    chrt.ChartAreas["ChartAreaRed"].Position.X = 0;
    chrt.ChartAreas.Add("ChartAreaGreen");
    chrt.ChartAreas["ChartAreaGreen"].BackColor = System.Drawing.Color.Transparent;
    chrt.ChartAreas["ChartAreaGreen"].Position.Height = 100;
    chrt.ChartAreas["ChartAreaGreen"].Position.Width = 100;
    chrt.ChartAreas["ChartAreaGreen"].InnerPlotPosition.Height = 90;
    chrt.ChartAreas["ChartAreaGreen"].InnerPlotPosition.Width = 80;
    chrt.ChartAreas["ChartAreaGreen"].InnerPlotPosition.X = 10;
    chrt.ChartAreas["ChartAreaGreen"].AxisY.Maximum = 6;
    chrt.ChartAreas["ChartAreaGreen"].AxisX.Maximum = 5;
    chrt.ChartAreas["ChartAreaGreen"].AxisX.Interval = 1;
    chrt.ChartAreas["ChartAreaGreen"].Position.X = 0;
    chrt.ChartAreas["ChartAreaGreen"].Axes[0].Enabled = AxisEnabled.False;
    chrt.ChartAreas["ChartAreaGreen"].Axes[1].Enabled = AxisEnabled.False;
    chrt.ChartAreas.Add("ChartAreaBlue");
    chrt.ChartAreas["ChartAreaBlue"].BackColor = System.Drawing.Color.Transparent;
    chrt.ChartAreas["ChartAreaBlue"].Position.Height = 100;
    chrt.ChartAreas["ChartAreaBlue"].Position.Width = 100;
    chrt.ChartAreas["ChartAreaBlue"].InnerPlotPosition.Height = 90;
    chrt.ChartAreas["ChartAreaBlue"].InnerPlotPosition.Width = 80;
    chrt.ChartAreas["ChartAreaBlue"].InnerPlotPosition.X = 15;
    chrt.ChartAreas["ChartAreaBlue"].AxisY.Maximum = 6;
    chrt.ChartAreas["ChartAreaBlue"].AxisX.Maximum = 5;
    chrt.ChartAreas["ChartAreaBlue"].AxisX.Interval = 1;
    chrt.ChartAreas["ChartAreaBlue"].Axes[0].Enabled = AxisEnabled.False;
    chrt.ChartAreas["ChartAreaBlue"].Axes[1].Enabled = AxisEnabled.False;

    chrt.ChartAreas["ChartAreaBlue"].AxisX.MajorGrid.Enabled = false;

    Series chrtS_Red = new Series();
    chrtS_Red.Points.Add(new DataPoint(2, 1));
    chrtS_Red.Points.Add(new DataPoint(3, 0));
    chrtS_Red.Points.Add(new DataPoint(4, 2));
    chrtS_Red.ChartType = SeriesChartType.Column;
    chrtS_Red.Color = System.Drawing.ColorTranslator.FromHtml("#aa220d"); // massini red
    chrtS_Red.IsValueShownAsLabel = true;
    chrtS_Red.EmptyPointStyle.IsValueShownAsLabel = false;
    chrtS_Red["PointWidth"] = ".5";
    chrtS_Red["LabelStyle"] = "TopLeft"; // Auto, Top, Bottom, Right, Left, TopLeft, TopRight, BottomLeft, BottomRight, Center
    chrtS_Red.ChartArea = "ChartAreaRed";
    chrt.Series.Add(chrtS_Red);

    Series chrtS_Green = new Series();
    chrtS_Green.Points.Add(new DataPoint(2, 0));
    chrtS_Green.Points[0].IsEmpty = true;
    chrtS_Green.Points.Add(new DataPoint(3, 5));
    chrtS_Green.Points.Add(new DataPoint(4, 0));
    chrtS_Green.Points[2].IsEmpty = true;
    chrtS_Green.ChartType = SeriesChartType.Column;
    chrtS_Green.Color = System.Drawing.ColorTranslator.FromHtml("#94952d"); // massini green
    chrtS_Green.IsValueShownAsLabel = true;
    chrtS_Green.EmptyPointStyle.IsValueShownAsLabel = false;
    chrtS_Green["LabelStyle"] = "TopLeft"; // Auto, Top, Bottom, Right, Left, TopLeft, TopRight, BottomLeft, BottomRight, Center
    chrtS_Green["PointWidth"] = ".5";
    chrtS_Green.ChartArea = "ChartAreaGreen";
    chrt.Series.Add(chrtS_Green);

    Series chrtS_Blue = new Series();
    chrtS_Blue.Points.Add(new DataPoint(2, 3));
    chrtS_Blue.Points.Add(new DataPoint(3, 4));
    chrtS_Blue.Points.Add(new DataPoint(4, 5));
    chrtS_Blue.ChartType = SeriesChartType.Column;
    chrtS_Blue.Color = System.Drawing.ColorTranslator.FromHtml("#3e8bc3"); // massini blue
    chrtS_Blue.IsValueShownAsLabel = true;
    chrtS_Blue["LabelStyle"] = "TopRight"; // Auto, Top, Bottom, Right, Left, TopLeft, TopRight, BottomLeft, BottomRight, Center
    chrtS_Blue["PointWidth"] = ".5";
    chrtS_Blue.ChartArea = "ChartAreaBlue";
    chrt.Series.Add(chrtS_Blue);

这将产生如下所示的内容:

Overlap with Chart Areas

这种方法肯定更复杂,更难理解。但是一旦你明白它就可以实现更大的控制。关键是将所有图表区域的宽度和高度设置为相同的值,然后对InnerPlotPosition属性执行相同的操作。

InnerPlotPosition允许您控制绘图区域内专用于绘制值的区域,而不是在宽度和高度计算中包含网格线和值。

您必须为InnerPlotPosition设置宽度和高度的值,否则将使用默认值0,您将看不到任何内容。

此外,如果您打算使用网格线或X轴和Y轴值,那么您将需要InnerPlotPosition的宽度和高度值小于100,以允许这些项目的图表区域内的空间,否则它们将被隐藏。

最后,在使用图层时,请确保将所有背景设置为透明,否则您只会看到添加的最后一个图层。如果你想要一个背景,那就把它应用到第一层。