下載Mindfusion最新版本

Thia post將演示如何創(chuàng)建具有負(fù)值的水平堆疊條形圖。我們將使用Charting for WinForms組件，最終圖表如下所示：

使用圖表控件的WinForms中的負(fù)疊加條形圖

一、數(shù)據(jù)

該圖表將使用四個(gè)系列。前兩個(gè)系列是你清楚看到的 - 紅色和藍(lán)色系列。我們用表示數(shù)據(jù)的隨機(jī)值初始化兩個(gè)數(shù)據(jù)數(shù)組：

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

我們需要一個(gè)列表，其數(shù)據(jù)值與第一個(gè)系列完全相同，但是為負(fù)數(shù)。它們將提供一個(gè)透明的初始系列，其條形將偏移第一個(gè)紅色系列，與紅色條的值應(yīng)該是：

//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軸的數(shù)據(jù)非常簡單。我們只需要一個(gè)包含1到12之間數(shù)字的列表：

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

二、標(biāo)簽

我們將創(chuàng)建兩個(gè)列表，其中包含我們將顯示的標(biāo)簽 - 兩個(gè)軸。Y軸的標(biāo)簽也將用作工具提示。我們只是初始化兩個(gè)字符串列表：

//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%", };

在創(chuàng)建系列時(shí)，我們將在下一節(jié)中使用此標(biāo)簽列表。

三、系列

我們將使用Series2D類型的4個(gè)系列。此系列對其SupportedLabels屬性很有用- 它允許我們指定系列的標(biāo)簽將用于什么。我們從透明系列開始。其標(biāo)簽將用于Y軸的自定義標(biāo)簽：

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

我們使用前一段中記住的負(fù)值來獲取X數(shù)據(jù)。年齡標(biāo)簽是為軸提供數(shù)據(jù)的標(biāo)簽。 然后我們初始化圖表數(shù)據(jù)的兩個(gè)系列：

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

我們創(chuàng)建的最后一個(gè)系列只是為X軸提供數(shù)據(jù)，我們將其SupportedLabels屬性設(shè)置為MindFusion.Charting.LabelKinds.XAxisLabel。此系列的X數(shù)據(jù)對應(yīng)于X標(biāo)簽的坐標(biāo)，這就是為什么將數(shù)字從-5設(shè)置為5作為X數(shù)據(jù)的原因：

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

Y數(shù)據(jù)可以全為零，無論如何我們都不會(huì)使用它們。

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

我們以這種方式創(chuàng)建系列：

//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 = "";

創(chuàng)建完所有系列后，應(yīng)將它們添加到BarChart的Series集合中：

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

四、軸和網(wǎng)格

如果我們想要顯示網(wǎng)格并且網(wǎng)格與軸整齊對齊，我們需要修復(fù)X軸的劃分。我們將最小值設(shè)置為-6，間隔1和最大值設(shè)置為6：

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

我們將使用另外三個(gè)屬性來隱藏兩個(gè)軸上的間隔標(biāo)簽，在它們上顯示刻度并為每個(gè)軸設(shè)置標(biāo)題：

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

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

最后，我們必須設(shè)置網(wǎng)格并指定條形是水平的：

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

五、Styles

通過Plot 的SeriesSyle屬性完成圖表的樣式設(shè)置。您可以為其分配不同的系列類型，您可以在文檔中的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
	}
};

此樣式表示其集合中的每個(gè)畫筆將用于圖表中的一個(gè)系列。我們?yōu)樗峙淞?個(gè)畫筆和4個(gè)筆畫。第一個(gè)刷子是透明的，第二個(gè)是紅色的，另一個(gè)是藍(lán)色的，最后一個(gè)是黑色的 - 無論如何我們都不會(huì)用它畫畫。

圖表的Theme屬性包含許多用于自定義外觀的選項(xiàng)。以下是其中一些：

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樣本中的負(fù)堆棧條形圖

關(guān)于WinFms的MindFusion圖表：一個(gè)多功能儀表板組件，為您的WinForms應(yīng)用程序提供創(chuàng)建迷人圖表，交互式儀表板和實(shí)用儀表的能力。該組件結(jié)合了靈活的API，允許自定義組合圖表組件，以構(gòu)建您想要的任何類型的圖表。您可以添加任意類型的軸，將各種圖表系列組合到一個(gè)圖表中，每個(gè)圖表都有不同的數(shù)據(jù)提供者。該控件還支持平移和縮放，滾動(dòng)，無限數(shù)量的圖例，網(wǎng)格和儀表板面板。線性和橢圓形儀表完善了工具組并保證了構(gòu)建完美儀表所需的每個(gè)功能，WinForms中任何類型或儀表板的圖表都在您的指尖。

購買Mindfusion正版授權(quán)，請點(diǎn)擊“”喲！