Mindfusion教程：WPF中的Fishbone（Ishikawa）图

下载Mindfusion最新版本

“Ishikawa图表（也称为鱼骨图，人字形图，因果图或Fishikawa）是Kaoru Ishikawa创建的因果图，显示了特定事件的原因。

本教程将演示使用WPF图库创建相同的图表并编写几行代码是多么容易。这是最终的图表：

带有MindFusion WPF图库的WPF中的Ishikawa（鱼骨）图

I.一般设置

我们在Visual Studio中创建一个名为“Fishbone”的空WPF项目。在那里我们创建一个Assemblies文件夹，我们放置必要的dll-s：

• MindFusion.Common.dll
• MindFusion.Diagramming.Wpf.dll

然后在MainWindow.xaml文件中，我们创建一个映射到Diagramming命名空间：

<Window x_Class="Fishbone.MainWindow"        xmlns=

然后我们在默认的Grid WPF控件中创建图表：

<Grid> <diag：FishboneDiagram x：Name = “fdiag” /> </ Grid>

该代码创建了一个名为“fdiag” 的FishboneDiagram *类的新实例。我们可以使用此名称来访问代码中的对象。

II.图数据

FishboneDiagram类公开了一个ItemsSource属性，该属性为图提供数据。数据是一个对象，包含主要子句的标签和包含子条款标签的列表。我们创建了一个名为FBClause的特殊类，它将代表每个鱼骨：

public class FBCause{public FBCause(){SubCauses = new List();}public string Label { get; set; }

接下来，我们以这种方式创建必要的鱼骨：

var c1 = new FBCause { Label = "Measurements" };c1.SubCauses = new    

完成所有鱼骨之后，我们创建模型，它将作为fdiag对象的数据源：

var model = new List { c1, c2, c3, c4, c5, c6 };

III.构建图表

现在数据已准备就绪，我们可以将它分配给FishboneDiagram类的ItemsSource属性：

fdiag.ItemsSource = model;

我们将使用LabelPath和SubCausesPath属性将FBClause对象的相应字段绑定到FishboneDiagram的正确数据属性：

fdiag.LabelPath 

如果您的模型的子条款是对象而不是我们的FBClause类中的字符串，则应使用SubLabelPath属性来设置将为子条款标签提供数据的字段的名称。

最后，我们调用图的ResizeToFitItems方法来确保所有鱼骨都可见：

fdiag.ResizeToFitItems(30);

编译并运行样本，您将看到完美的鱼骨图。您可以从此链接下载示例以及所有必需的dll-s：

在WPF示例中下载MindFusion Fishbone（Ishikawa）图

* FishboneDiagram类将与WPF Diagram Tool的下一版本正式发布。 关于WPF的图表：这是在WPF中创建始终满足您要求的流程图的正确工具。该库提供100多个预定义的节点形状，广泛的事件集和超过15个出口商和进口商。您构建的每个图表都具有完全可自定义的流程图的每个部分的样式，主题和外观属性外观。众多示例和详细文档可帮助您快速了解如何将组件集成到您自己的应用程序中。

购买Mindfusion正版授权，请点击“咨询在线客服”哟！

标签：JavaScript 图表图表控件