【Mindfusion教程】WinForms中的负栏堆栈

下载Mindfusion最新版本

Thia post将演示如何创建具有负值的水平堆叠条形图。我们将使用Charting for WinForms组件，最终图表如下所示：

使用图表控件的WinForms中的负叠加条形图

一、数据

该图表将使用四个系列。前两个系列是你清楚看到的 - 红色和蓝色系列。我们用表示数据的随机值初始化两个数据数组：

var firstBarX = new List<double>(11);
var secondBarX = new List<double>(11);

Random r = new Random();
            
for(int i = 0; i < 11; i++)
   {
       firstBarX.Add(2.2 + r.NextDouble());
       secondBarX.Add(2.4 + r.NextDouble());
    }

我们需要一个列表，其数据值与第一个系列完全相同，但是为负数。它们将提供一个透明的初始系列，其条形将偏移第一个红色系列，与红色条的值应该是：

//generate data for the transparent series
var transparentBarX = new List<double>(firstBarX.Count);

for (var i = 0; i < firstBarX.Count; i++)			
    transparentBarX.Add(0 - firstBarX[i]);

Y轴的数据非常简单。我们只需要一个包含1到12之间数字的列表：

//data for the Y-axis
var barY = new List<double>();
for (int i = 1; i < 12; i++)			
	barY.Add(i);

二、标签

我们将创建两个列表，其中包含我们将显示的标签 - 两个轴。Y轴的标签也将用作工具提示。我们只是初始化两个字符串列表：

//initialize labels for the X axis
var ageLabels = new List<string>() { "0-5", "6-11", "12-17", "18-23", "24-29", "30-35",
		   "36-41", "42-47", "48-53", "54-59", "60-65" };

//initialize labels for the Y axis.
var percentageLabels = new List<string> { "5%", "4%", "3%", "2%", "1%", "0%", 				"1%", "2%", "3%", "4%", "5%", };

在创建系列时，我们将在下一节中使用此标签列表。

三、系列

我们将使用Series2D类型的4个系列。此系列对其SupportedLabels属性很有用- 它允许我们指定系列的标签将用于什么。我们从透明系列开始。其标签将用于Y轴的自定义标签：

var seriesTransparent = new MindFusion.Charting.Series2D(transparentBarX, barY, ageLabels);
seriesTransparent.SupportedLabels = MindFusion.Charting.LabelKinds.YAxisLabel;
seriesTransparent.Title = "";

我们使用前一段中记住的负值来获取X数据。年龄标签是为轴提供数据的标签。 然后我们初始化图表数据的两个系列：

var seriesFirst = new MindFusion.Charting.Series2D(firstBarX, barY, ageLabels);
seriesFirst.SupportedLabels = MindFusion.Charting.LabelKinds.ToolTip;
seriesFirst.Title = "Female";

var seriesSecond = new MindFusion.Charting.Series2D(secondBarX, barY, ageLabels);
seriesSecond.SupportedLabels = MindFusion.Charting.LabelKinds.ToolTip;
seriesSecond.Title = "Male";

我们创建的最后一个系列只是为X轴提供数据，我们将其SupportedLabels属性设置为MindFusion.Charting.LabelKinds.XAxisLabel。此系列的X数据对应于X标签的坐标，这就是为什么将数字从-5设置为5作为X数据的原因：

var firstParamList = new List<double>();
      for (int i = -5; i < 6; i++)			
	 firstParamList.Add(i);

Y数据可以全为零，无论如何我们都不会使用它们。

var secondParamList = new List<double>();
    for (int i = 0; i < 12; i++)			
	secondParamList.Add(0);

我们以这种方式创建系列：

//the purpose of this series is to only supply the Xaxis labels, it is transparent.	
var seriesThird = new MindFusion.Charting.Series2D(firstParamList, secondParamList, percentageLabels);           	
seriesThird.SupportedLabels = MindFusion.Charting.LabelKinds.XAxisLabel;
seriesThird.Title = "";

创建完所有系列后，应将它们添加到BarChart的Series集合中：

barChart.Series = new ObservableCollection<Series>
	{ seriesTransparent, seriesFirst, seriesSecond, seriesThird };

四、轴和网格

如果我们想要显示网格并且网格与轴整齐对齐，我们需要修复X轴的划分。我们将最小值设置为-6，间隔1和最大值设置为6：

barChart.XAxis.Interval = 1;
barChart.XAxis.MinValue = -6;
barChart.XAxis.MaxValue = 6;	

我们将使用另外三个属性来隐藏两个轴上的间隔标签，在它们上显示刻度并为每个轴设置标题：

barChart.XAxis.Title = "Percentage of the Population";
barChart.YAxis.Title = "Ages";
			
barChart.ShowYCoordinates = false;
barChart.ShowXCoordinates = false;

barChart.ShowXTicks = true;
barChart.ShowYTicks = true;

最后，我们必须设置网格并指定条形是水平的：

barChart.GridType = GridType.Vertical;
barChart.HorizontalBars = true;

五、Styles

通过Plot 的SeriesSyle属性完成图表的样式设置。您可以为其分配不同的系列类型，您可以在文档中的ISeriesStyle界面页面上查看列表：

barChart.Plot.SeriesStyle = new PerSeriesStyle()
{
	Strokes = new List<MindFusion.Drawing.Brush> {
		firstBrush, new SolidBrush(Color.FromArgb(179, 0, 0)), 
                new SolidBrush(Color.FromArgb(0, 0, 102)), firstBrush
		},
		StrokeThicknesses = new List<double> {
			 0,2,2,0
		},
		Fills = new List<MindFusion.Drawing.Brush>()
		{
			firstBrush, secondBrush, thirdBrush, firstBrush
	}
};

此样式表示其集合中的每个画笔将用于图表中的一个系列。我们为它分配了4个画笔和4个笔画。第一个刷子是透明的，第二个是红色的，另一个是蓝色的，最后一个是黑色的 - 无论如何我们都不会用它画画。

图表的Theme属性包含许多用于自定义外观的选项。以下是其中一些：

barChart.Theme.LegendBorderStrokeThickness = 1;
barChart.Theme.LegendBorderStroke = new SolidBrush(Color.Black);
barChart.Theme.GridColor2 = Color.White;
barChart.Theme.GridColor1 = Color.FromArgb(250, 250, 250);
barChart.Theme.GridLineColor = Color.FromArgb(153, 153, 153);
barChart.Theme.PlotBackground = new SolidBrush(Color.FloralWhite);
...........
..........

下载下载CS样本中的负堆栈条形图

关于WinFms的MindFusion图表：一个多功能仪表板组件，为您的WinForms应用程序提供创建迷人图表，交互式仪表板和实用仪表的能力。该组件结合了灵活的API，允许自定义组合图表组件，以构建您想要的任何类型的图表。您可以添加任意类型的轴，将各种图表系列组合到一个图表中，每个图表都有不同的数据提供者。该控件还支持平移和缩放，滚动，无限数量的图例，网格和仪表板面板。线性和椭圆形仪表完善了工具组并保证了构建完美仪表所需的每个功能，WinForms中任何类型或仪表板的图表都在您的指尖。