如何通过AJAX向BalkanOrgchart传JSON节点及解决节点颜色PDF导出失效问题

Hey there! Let's break down your two questions about BalkanOrgchart JS with practical solutions I've used in similar scenarios:

1. Passing Node Data & Setting Per-Node Colors #

Basic Data Passing #

You can directly feed node data into the chart during initialization using the data config option. Each node should include required fields like id and parentId, plus custom fields for colors (e.g., bgColor):

const orgChart = new OrgChart(document.getElementById("chart-container"), {
  data: [
    { id: 1, name: "Company Head", bgColor: "#2d3748" },
    { id: 2, parentId: 1, name: "Engineering Lead", bgColor: "#3182ce" },
    { id: 3, parentId: 1, name: "Marketing Lead", bgColor: "#e53e3e" }
  ],
  // Add other configs like node size, fonts, etc.
});

Loading Data via AJAX #

If you're fetching JSON data asynchronously, use the chart's load() method once your AJAX call succeeds. Here's a native fetch example:

// Fetch your JSON data
fetch("/api/orgchart-data")
  .then(res => res.json())
  .then(nodeData => {
    // Initialize chart if not already done
    const orgChart = new OrgChart(document.getElementById("chart-container"), {
      // Base configs (templates, layout, etc.)
    });
    // Load the fetched data into the chart
    orgChart.load(nodeData);
  })
  .catch(err => console.error("Failed to load data:", err));

Note: If the chart is already initialized, just call orgChart.load(nodeData) to refresh the data.

Setting Per-Node Colors #

To make the custom color field take effect, use either an inline template or the itemConfig callback:

• Inline Template Method (best for full control):

  const orgChart = new OrgChart(document.getElementById("chart-container"), {
    data: nodeData,
    template: `
      <div style="background-color: {{bgColor}}; color: white; padding: 12px; border-radius: 4px;">
        <div class="node-name">{{name}}</div>
      </div>
    `
  });
  

• itemConfig Callback Method:

  const orgChart = new OrgChart(document.getElementById("chart-container"), {
    data: nodeData,
    itemConfig: {
      getBackColor: (node) => node.bgColor || "#ffffff" // Fallback to white if no color is set
    }
  });
  

2. Fixing Missing Node Colors in PDF Exports #

PDF export issues usually happen because external styles or dynamic styles aren't captured during export. Try these fixes:

• Use Inline Styles Instead of CSS Classes: Export tools often don't pick up external stylesheets, so make sure your node colors are set via inline style attributes (like the template example above).
• Pre-Apply Styles in Export Callback: Use the onBeforeExport hook to force styles onto nodes right before export:

  orgChart.exportPDF({
    fileName: "company-orgchart.pdf",
    onBeforeExport: () => {
      // Target all chart nodes
      const nodes = document.querySelectorAll(".orgchart-item");
      nodes.forEach(node => {
        // Get the color from the node's data (adjust selector/attribute as needed)
        const nodeData = orgChart.getNodeById(node.getAttribute("data-id"));
        if (nodeData.bgColor) {
          node.style.backgroundColor = nodeData.bgColor;
        }
      });
    }
  });
  

• Validate Color Values: Double-check that your JSON data's color values are valid (e.g., #hex, rgb(), or named colors)— typos like missing # will break the style.

内容的提问来源于stack exchange，提问作者Siva