.net - 图表控制两个数据集条重叠

Question

我正在处理一个 ASP.NET 项目，我有一个条形图，其中包含两个数据集并排。我如何让他们超过一圈。

一项数据是罐大小，另一项是当前水平。

Answer 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 更改为列，另一个更改为堆叠 - 这可能是一种肮脏的方式，但我可以工作。这就是我所关心的。

Answer 2

以上述 StackedColumn 解决方案为基础。如果您不希望列完全重叠，而只想部分重叠。您可以生成第三个系列，其中两个系列是 ChartType="Column"，一个是“StackedColumn”。

第二个系列的 ChartType Column 至少需要一个点，但是将该点设置为 Y 值 0，因此它不会显示；这个系列将具有将其他系列推到一边的效果。

    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);

自从发布代码以来，我已经更改了图片的值，但是它会给你一个类似这样的最终结果：

---

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

    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);

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

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

The InnerPlotPosition allows you to control the area inside the plot area that is dedicated to plotting the values rather than having the grid lines and values included in the width and height calculations.

You have to set a value for both the width and the height for InnerPlotPosition or else a default of 0 will be used and you will see nothing.

Also, if you intend to have grid lines or X and Y axis values then you will need the width and height values for InnerPlotPosition to be less than 100 to allow for room inside the Chart Area for those items, or else they will be hidden.

Finally, when using layers, make sure you set all the backgrounds to transparent or you will only see the last layer added. If you want a background then apply it to the first layer.

Answer 3

您可以使用 PointWidth 自定义属性

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