フラット/表形式データの FlexDiagram

Data-bound diagrams that use flat or tabular data allow FlexDiagram to create hierarchical diagrams from database tables or spreadsheet data. Each column represents a hierarchy level, and FlexDiagram automatically interprets these relationships.

This method is useful for visualizing structured tabular data in a hierarchical and intuitive format.

Create Flat/Tabular Data FlexDiagram

Create a data table.

C#	コードのコピー
DataTable table = new DataTable(); table.Columns.Add("Field"); table.Columns.Add("Domain"); table.Columns.Add("Specialty"); table.Columns.Add("Skill");

Bind the table to the diagram.

C#	コードのコピー
diagram.DataSource = table; diagram.Binding = "Field,Domain,Specialty,Skill";

Flat/Tabular FlexDiagram Sample

C#	コードのコピー
using C1.Diagram; using C1.Win.Diagram; using System.Data; namespace FlexDiagramPoC { public partial class Form1 : Form { public Form1() { InitializeComponent(); InitializeDiagram(); } private void InitializeDiagram() { // Create FlexDiagram instance var diagram = new FlexDiagram(); diagram.Dock = DockStyle.Fill; this.Controls.Add(diagram); // Configure data binding // Get data table var table = CreateSkillsTable(); // Set diagram data source diagram.DataSource = table; // Specify names of columns // 1st level, 2nd level, 3rd level, Node text diagram.Binding = "Field,Domain,Specialty,Skill"; diagram.Direction = DiagramDirection.LeftRight; } DataTable CreateSkillsTable() { DataTable skillsTable = new DataTable("SkillsHierarchy"); // Define columns in hierarchical order skillsTable.Columns.Add("Field", typeof(string)); skillsTable.Columns.Add("Domain", typeof(string)); skillsTable.Columns.Add("Specialty", typeof(string)); skillsTable.Columns.Add("Skill", typeof(string)); // Add data rows skillsTable.Rows.Add("Field", "Domain", "Specialty", "Skill"); skillsTable.Rows.Add("Technology", "Frontend", "JavaScript Frameworks", "React Development"); skillsTable.Rows.Add("Technology", "Data Science", "Artificial Intelligence", "Machine Learning"); skillsTable.Rows.Add("Technology", "Database", "Query Performance", "SQL Optimization"); skillsTable.Rows.Add("Technology", "Backend", "Programming Languages", "Python Programming"); skillsTable.Rows.Add("Technology", "Infrastructure", "AWS Solutions", "Cloud Architecture"); return skillsTable; } } }

コードのコピー

using C1.Diagram;
using C1.Win.Diagram;
using System.Data;

namespace FlexDiagramPoC
{
  public partial class Form1 : Form
  {
    public Form1()
    {
      InitializeComponent();
      InitializeDiagram();
    }

    private void InitializeDiagram()
    {
      // Create FlexDiagram instance
      var diagram = new FlexDiagram();
      diagram.Dock = DockStyle.Fill;
      this.Controls.Add(diagram);

      // Configure data binding
      // Get data table
      var table = CreateSkillsTable();

      // Set diagram data source
      diagram.DataSource = table;

      // Specify names of columns
      // 1st level, 2nd level, 3rd level, Node text
      diagram.Binding = "Field,Domain,Specialty,Skill";
      diagram.Direction = DiagramDirection.LeftRight;
    }

    DataTable CreateSkillsTable()
    {
      DataTable skillsTable = new DataTable("SkillsHierarchy");

      // Define columns in hierarchical order
      skillsTable.Columns.Add("Field", typeof(string));
      skillsTable.Columns.Add("Domain", typeof(string));
      skillsTable.Columns.Add("Specialty", typeof(string));
      skillsTable.Columns.Add("Skill", typeof(string));

      // Add data rows
      skillsTable.Rows.Add("Field", "Domain", "Specialty", "Skill");
      skillsTable.Rows.Add("Technology", "Frontend", "JavaScript Frameworks", "React Development");
      skillsTable.Rows.Add("Technology", "Data Science", "Artificial Intelligence", "Machine Learning");
      skillsTable.Rows.Add("Technology", "Database", "Query Performance", "SQL Optimization");
      skillsTable.Rows.Add("Technology", "Backend", "Programming Languages", "Python Programming");
      skillsTable.Rows.Add("Technology", "Infrastructure", "AWS Solutions", "Cloud Architecture");

      return skillsTable;
    }
  }
}