我们需要使用billboard.js将子图移动到顶部

Question

任何人都可以找到我想将图表移至浏览器中的顶部然后主图表的问题的解决方案吗？请让我们知道如何解决此问题

我想将子图移动到顶部，然后主图应该显示在浏览器中。

var chart = bb.generate({
  data: {
    columns: [
    ["sample", 30, 200, 100, 400, 150, 250]
    ],
    type: "line", // for ESM specify as: line()
  },
  subchart: {
    show: true, // for ESM specify as: subchart()
    showHandle: true
  },
  bindto: "#subChart"
});

Answer 1

这是一种解决方法，您可以通过利用 Billboard.js 中的 onbeforeinit 挂钩来使用：

var chart = bb.generate({
  data: {
    columns: [["sample", 30, 200, 100, 400, 150, 250]],
    type: "line", // for ESM specify as: line()
  },
  subchart: {
    show: true, // for ESM specify as: subchart()
    showHandle: true,
  },
  bindto: "#subChart",
  **onbeforeinit: function () {
    setTimeout(() => {
      const svg = document.querySelector("#subChart svg");
      const subchartGroup = svg.querySelector(".bb-subchart");
      const mainGroup = svg.querySelector(".bb-main");
      if (subchartGroup && mainGroup) {
        const subchartTransform = subchartGroup.getAttribute("transform");
        const mainChartTransform = mainGroup.getAttribute("transform");
        // Swap the transforms of the subchart and main chart
        mainGroup.setAttribute("transform", `${subchartTransform}`);
        subchartGroup.setAttribute("transform", `${mainChartTransform}`);
      }
    }, 0);
  },**
});

说明：

• onbeforeinit 函数用于在图表绘制之前执行代码 完全初始化。
• setTimeout 确保 DOM 在尝试之前已完全准备好 访问和操作 SVG 元素。
• 代码交换了主图表和主图表的变换属性 子图，有效地交换他们的位置。