关于使用getOrgChart插件实现供应链全链路单图展示的技术咨询

Hey Luis! No worries about your English—let’s get your supply chain visualization sorted out. The key here is to adjust how you structure your data and configure getOrgChart to support a horizontal, full-chain layout instead of the default vertical parent-to-child tree. Here’s a step-by-step fix:

1. Restructure Your Data for Full Chain #

Instead of splitting suppliers and customers into separate charts, set your core business as the central node:

• Make suppliers the parent nodes of your core business (to place them upstream)
• Make customers the child nodes of your core business (to place them downstream)

Example data structure:

const supplyChainData = [
  // Suppliers (top-level upstream nodes)
  { id: 2, name: "Supplier A", title: "Raw Materials Provider" },
  { id: 3, name: "Supplier B", title: "Logistics Partner" },
  // Core business (central node, child of suppliers)
  { id: 1, name: "My Enterprise", title: "Core Business", parentId: 2 },
  // Customers (downstream child nodes of core business)
  { id: 4, name: "Customer X", title: "Retail Client" },
  { id: 5, name: "Customer Y", title: "Direct Buyer", parentId: 1 }
];

2. Configure getOrgChart for Horizontal Flow #

Set the orientation to horizontal so the chain flows left (suppliers) → center (business) → right (customers):

const chart = new getOrgChart(document.getElementById("orgChart"), {
  dataSource: supplyChainData,
  orientation: "horizontal", // Critical for left-to-right supply chain flow
  nodeBinding: {
    field_0: "name",
    field_1: "title"
  },
  // Optional: Adjust spacing for better readability
  nodeWidth: 220,
  nodeHeight: 90,
  levelSeparation: 180
});

3. Add Support for Adding Both Upstream Suppliers and Downstream Customers #

By default, getOrgChart only lets you add child nodes, but we can add custom buttons to create upstream suppliers (parent nodes) for your core business:

// Add custom action buttons when nodes are rendered
chart.on("draw", function(event) {
  const node = event.node;
  
  // Add buttons only to the core business node
  if (node.id === 1) {
    // Button to add downstream customers
    const addCustomerBtn = document.createElement("button");
    addCustomerBtn.textContent = "Add Customer";
    addCustomerBtn.style.margin = "5px 0 0 0";
    addCustomerBtn.onclick = function() {
      const newId = Date.now(); // Generate unique ID for new node
      chart.addNode({
        id: newId,
        name: "New Customer",
        title: "Client",
        parentId: 1
      });
    };
    node.element.appendChild(addCustomerBtn);

    // Button to add upstream suppliers
    const addSupplierBtn = document.createElement("button");
    addSupplierBtn.textContent = "Add Supplier";
    addSupplierBtn.style.margin = "5px 0 0 8px";
    addSupplierBtn.onclick = function() {
      const newId = Date.now();
      // Create new supplier node
      chart.addNode({
        id: newId,
        name: "New Supplier",
        title: "Vendor"
      });
      // Update core business to be a child of the new supplier
      chart.updateNode(1, { parentId: newId });
      chart.refresh();
    };
    node.element.appendChild(addSupplierBtn);
  }
});

4. Style Nodes to Differentiate Types (Optional) #

Make suppliers, your core business, and customers visually distinct with custom CSS:

/* Style upstream suppliers */
.get-org-chart .node:nth-child(1) .get-org-chart-node-inner {
  background-color: #e7f5ff;
  border-color: #1976d2;
}

/* Style core business node */
.get-org-chart .node[data-id="1"] .get-org-chart-node-inner {
  background-color: #fff3cd;
  border-color: #ffc107;
}

/* Style downstream customers */
.get-org-chart .node:nth-child(n+3) .get-org-chart-node-inner {
  background-color: #d4edda;
  border-color: #28a745;
}

This setup will give you a single, unified chart showing your full end-to-end supply chain!

内容的提问来源于stack exchange，提问作者Luis Fernando Zumaran